Holographic Tilt Card

<div class="holo" id="holo"><div class="holo-in"><span class="holo-chip"></span><b>HOLOGRAPHIC</b><span class="holo-sub">Tilt me</span></div></div>

body{background:#0a0a14}
.holo{perspective:800px}
.holo-in{position:relative;width:240px;height:150px;border-radius:18px;background:linear-gradient(135deg,#ff7a18,#ff477e,#7b2ff7,#00d4ff);background-size:200% 200%;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;font-family:system-ui,sans-serif;transition:transform .1s;overflow:hidden;box-shadow:0 20px 40px rgba(123,47,247,.4)}
.holo-in::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(255,255,255,.5),transparent 45%);pointer-events:none}
.holo-chip{width:36px;height:26px;border-radius:6px;background:linear-gradient(135deg,#ffd84d,#ff9a00);margin-bottom:10px}
.holo-in b{font-size:18px;letter-spacing:2px}
.holo-sub{font-size:12px;opacity:.8;margin-top:4px}

var h=document.getElementById('holo'),c=h.querySelector('.holo-in');
h.addEventListener('mousemove',function(e){var r=h.getBoundingClientRect(),x=(e.clientX-r.left)/r.width,y=(e.clientY-r.top)/r.height;c.style.transform='rotateY('+((x-.5)*30)+'deg) rotateX('+((.5-y)*30)+'deg)';c.style.backgroundPosition=(x*100)+'% '+(y*100)+'%';c.style.setProperty('--x',x*100+'%');c.style.setProperty('--y',y*100+'%')});
h.addEventListener('mouseleave',function(){c.style.transform='rotateY(0) rotateX(0)'});