3D Parallax Tilt Card

<div class="tilt" id="tilt">
  <div class="tilt-inner">
    <span class="tilt-badge">PRO</span>
    <h3>Tilt Card</h3>
    <p>Move your cursor across me — I follow with a 3D parallax tilt and a moving glare.</p>
  </div>
  <span class="tilt-glare" id="glare"></span>
</div>

*{box-sizing:border-box}
.tilt{position:relative;width:300px;height:200px;border-radius:18px;background:linear-gradient(135deg,#5b6cff,#a855f7);color:#fff;font-family:system-ui,sans-serif;transform-style:preserve-3d;transition:transform .15s ease;overflow:hidden;cursor:pointer;box-shadow:0 20px 50px rgba(91,108,255,.4)}
.tilt-inner{position:relative;z-index:2;padding:26px;transform:translateZ(40px)}
.tilt-badge{display:inline-block;background:rgba(255,255,255,.2);border-radius:6px;padding:3px 10px;font-size:11px;font-weight:800;letter-spacing:.08em}
.tilt h3{margin:14px 0 8px;font-size:24px}
.tilt p{margin:0;opacity:.9;font-size:13.5px;line-height:1.6}
.tilt-glare{position:absolute;width:200%;height:200%;top:-50%;left:-50%;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.35),transparent 40%);z-index:1;pointer-events:none}

var t=document.getElementById('tilt'),g=document.getElementById('glare');
t.addEventListener('mousemove',function(e){
  var r=t.getBoundingClientRect(),x=(e.clientX-r.left)/r.width,y=(e.clientY-r.top)/r.height;
  t.style.transform='perspective(700px) rotateY('+((x-.5)*18)+'deg) rotateX('+((.5-y)*18)+'deg)';
  g.style.setProperty('--x',x*100+'%');g.style.setProperty('--y',y*100+'%');
});
t.addEventListener('mouseleave',function(){t.style.transform='perspective(700px) rotateX(0) rotateY(0)'});