JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div class="drop"></div>

CSS

:root {
	--box-width: 20vw;
}

body {
    background: radial-gradient(#000 10%, transparent 0), #fff;
    background-size: 50px 50px;
	text-align: center;
}

.drop {
	width: var(--box-width);
	height: var(--box-width);
	margin: calc(50vh - var(--box-width) / 2) auto;
	border: 1px solid rgba(0,0,0,0.05);
	backdrop-filter: blur(5px);
	position: relative; /* required */
}

JavaScript

console.clear();

let drop = document.querySelector(".drop");

document.addEventListener("mousemove", e => {
	let dx = e.clientX / window.innerWidth;
	let dy = e.clientY / window.innerHeight;
	drop.style.transform = `scaleX(${dx * 5}) scaleY(${dy * 5})`;
});