SCSS
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #000;
}
$dropShadows: ();
@for $i from 1 through 6 {
$dropShadows: $dropShadows drop-shadow(calc( var(--x) * #{pi()} * #{$i}) calc( var(--y) * #{pi()} * #{$i}) #{$i*0.3}px hsl(270, 100%, $i*12%));
}
h1 {
font-family: 'Bungee Outline', "Helvetica Neue", Helvetica, sans-serif;
font-size: 25vh;
color: white;
text-align: center;
font-weight: normal;
filter: $dropShadows;
}
JAVASCRIPT
let title = document.querySelector("h1");
document.addEventListener("mousemove", e => {
let x = e.clientX;
let y = e.clientY;
title.style.setProperty("--x", `${(x - window.innerWidth/2) / 100}px`);
title.style.setProperty("--y", `${(y - window.innerHeight/2) / 100}px`);
});
