홀로그래픽

<div class="card" id="holo"><div class="foil"></div><span>HOLO</span></div>

.card{--a:0deg;position:relative;width:min(200px,70%);aspect-ratio:3/4;border-radius:18px;
  background:linear-gradient(160deg,#141420,#050508);display:grid;place-items:center;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.5)}
.foil{position:absolute;inset:-40%;
  background:conic-gradient(from var(--a),#ff2d90,#ffb648,#f5e663,#18c29c,#22d3ee,#a855f7,#ff2d90);
  mix-blend-mode:color-dodge;opacity:.85;filter:blur(2px)}
.card span{position:relative;color:#fff;font-weight:800;font-size:22px;letter-spacing:.15em;
  text-shadow:0 2px 10px rgba(0,0,0,.6)}

const el = document.getElementById('holo');
let auto = true, a = 0;
function loop() { if (auto) { a = (a + 0.8) % 360; el.style.setProperty('--a', a + 'deg'); } requestAnimationFrame(loop); }
loop();
el.addEventListener('pointermove', (e) => {
  auto = false;
  const r = el.getBoundingClientRect();
  el.style.setProperty('--a', Math.round(((e.clientX - r.left) / r.width) * 360) + 'deg');
});
el.addEventListener('pointerleave', () => { auto = true; });