Mouse-Move Parallax Hero — Free HTML CSS JS Snippet

<section class="ph-hero" id="phHero">
  <div class="parallax-layer ph-layer-back" data-depth="0.02" id="phLayerBack">
    <span class="ph-dot" style="top:10%;left:15%"></span>
    <span class="ph-dot" style="top:30%;left:80%"></span>
    <span class="ph-dot" style="top:70%;left:20%"></span>
    <span class="ph-dot" style="top:85%;left:65%"></span>
    <span class="ph-dot" style="top:50%;left:45%"></span>
    <span class="ph-dot" style="top:20%;left:55%"></span>
  </div>
  <div class="parallax-layer ph-layer-mid" data-depth="0.05">
    <span class="ph-shape ph-shape-a"></span>
    <span class="ph-shape ph-shape-b"></span>
  </div>
  <div class="parallax-layer ph-layer-front" data-depth="0.1">
    <span class="ph-shape ph-shape-c"></span>
  </div>

  <div class="ph-content">
    <h1>Build interfaces<br />that feel alive</h1>
    <p>A subtle mouse-driven parallax hero — move your cursor to see the depth.</p>
    <button class="ph-cta">Get Started</button>
  </div>
</section>

*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,sans-serif;margin:0}
.ph-hero{position:relative;width:100%;height:100vh;min-height:480px;background:radial-gradient(circle at 30% 20%,#1e1b4b,#0b0d1a 70%);overflow:hidden;display:flex;align-items:center;justify-content:center}
.parallax-layer{position:absolute;inset:0;pointer-events:none;will-change:transform}
.ph-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.5)}
.ph-shape{position:absolute;border-radius:50%;filter:blur(50px);opacity:.55}
.ph-shape-a{width:280px;height:280px;background:#6366f1;top:15%;left:10%}
.ph-shape-b{width:220px;height:220px;background:#ec4899;bottom:10%;right:12%}
.ph-shape-c{width:160px;height:160px;background:#22d3ee;top:55%;left:60%;filter:blur(60px);opacity:.35}
.ph-content{position:relative;z-index:2;text-align:center;color:#fff;padding:24px;max-width:600px}
.ph-content h1{font-size:clamp(28px,5vw,48px);font-weight:800;line-height:1.15;margin:0 0 14px;letter-spacing:-.02em}
.ph-content p{font-size:15px;color:#c7cbe0;margin:0 0 24px;line-height:1.6}
.ph-cta{padding:13px 28px;border-radius:999px;border:none;background:#fff;color:#0b0d1a;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .15s}
.ph-cta:hover{transform:translateY(-2px)}

var hero = document.getElementById('phHero');
var layers = Array.prototype.slice.call(document.querySelectorAll('.parallax-layer'));

var target = { x: 0, y: 0 };
var current = { x: 0, y: 0 };
var rafId = null;

function onMouseMove(e) {
  var rect = hero.getBoundingClientRect();
  var cx = rect.left + rect.width / 2;
  var cy = rect.top + rect.height / 2;
  target.x = e.clientX - cx;
  target.y = e.clientY - cy;
}

function onMouseLeave() {
  target.x = 0;
  target.y = 0;
}

function lerp(a, b, t) {
  return a + (b - a) * t;
}

function animate() {
  current.x = lerp(current.x, target.x, 0.08);
  current.y = lerp(current.y, target.y, 0.08);

  layers.forEach(function (layer) {
    var depth = parseFloat(layer.getAttribute('data-depth')) || 0;
    var moveX = -current.x * depth;
    var moveY = -current.y * depth;
    layer.style.transform = 'translate3d(' + moveX.toFixed(2) + 'px,' + moveY.toFixed(2) + 'px,0)';
  });

  rafId = requestAnimationFrame(animate);
}

hero.addEventListener('mousemove', onMouseMove);
hero.addEventListener('mouseleave', onMouseLeave);

animate();