Scroll Holographic Card Tilt Story — Free HTML CSS JS Snippet

<div class="hint">Scroll ↓ — tilt is driven by scroll, not your mouse</div>
<section class="card-stage">
  <div class="scene">
    <div class="card" id="card">
      <div class="card-face">
        <div class="rarity-frame" id="frame"></div>
        <div class="sheen" id="sheen"></div>
        <div class="content" id="c1">
          <span class="tag">COMMON</span>
          <h3>Field Scout</h3>
          <p>Base card. Begin the journey.</p>
        </div>
        <div class="content" id="c2">
          <span class="tag rare">RARE</span>
          <h3>Signal Weaver</h3>
          <p>Bends light to send messages.</p>
        </div>
        <div class="content" id="c3">
          <span class="tag epic">EPIC</span>
          <h3>Prism Warden</h3>
          <p>Guardian of the refracted path.</p>
        </div>
        <div class="content" id="c4">
          <span class="tag legendary">LEGENDARY</span>
          <h3>Aurora Sovereign</h3>
          <p>The full spectrum, mastered.</p>
        </div>
      </div>
    </div>
  </div>
</section>
<div class="spacer"></div>

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #05040a; color: #fff; }
.hint { position: sticky; top: 12px; text-align: center; font-size: 13px; letter-spacing: 0.05em; color: #a78bfa; z-index: 5; padding: 10px; }
.card-stage { height: 100vh; display: flex; align-items: center; justify-content: center; perspective: 1000px; background: radial-gradient(ellipse at 50% 50%, #1a1030 0%, #05040a 70%); }
.spacer { height: 250vh; }

.scene { transform-style: preserve-3d; }
.card { width: 260px; height: 360px; border-radius: 18px; position: relative; transform-style: preserve-3d; box-shadow: 0 30px 60px rgba(0,0,0,0.6); }
.card-face { position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(160deg, #14102a, #1e1440); overflow: hidden; }
.rarity-frame { position: absolute; inset: 0; border-radius: 18px; border: 3px solid #6b6b8a; transition: border-color 0.3s; pointer-events: none; z-index: 3; box-shadow: inset 0 0 24px rgba(255,255,255,0.05); }

.sheen { position: absolute; inset: -20%; z-index: 2; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0.85;
  background: linear-gradient(115deg, transparent 20%, #ff5cf0 32%, #5cf0ff 40%, #a0ff5c 48%, #ffe75c 56%, #ff5cf0 64%, transparent 76%);
  background-size: 200% 200%; background-position: 0% 50%; }

.content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 22px; opacity: 0; z-index: 4; }
.content h3 { margin: 6px 0; font-size: 22px; }
.content p { margin: 0; font-size: 13px; color: #cfd0e8; line-height: 1.5; }
.tag { font-size: 10px; letter-spacing: 0.1em; padding: 3px 9px; border-radius: 999px; background: #6b6b8a; color: #fff; width: fit-content; }
.tag.rare { background: #3b82f6; }
.tag.epic { background: #a855f7; }
.tag.legendary { background: linear-gradient(90deg, #f59e0b, #ef4444); }

gsap.registerPlugin(ScrollTrigger);

var card = document.getElementById('card');
var frame = document.getElementById('frame');
var sheen = document.getElementById('sheen');
var frameColors = ['#6b6b8a', '#3b82f6', '#a855f7', '#f59e0b'];
var contents = ['#c1', '#c2', '#c3', '#c4'].map(function (s) { return document.querySelector(s); });

var tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.card-stage',
    start: 'top top',
    end: '+=300%',
    scrub: 0.5,
    pin: true,
  },
});

tl.to(card, { rotateY: -18, rotateX: 10, duration: 1, ease: 'none' }, 0)
  .to(card, { rotateY: 18, rotateX: -6, duration: 1, ease: 'none' }, 1)
  .to(card, { rotateY: -10, rotateX: 14, duration: 1, ease: 'none' }, 2)
  .to(card, { rotateY: 0, rotateX: 0, duration: 1, ease: 'none' }, 3);

tl.to(sheen, { backgroundPosition: '100% 50%', duration: 4, ease: 'none' }, 0);

gsap.set(contents[0], { opacity: 1 });
[1, 2, 3].forEach(function (i) {
  tl.to(contents[i - 1], { opacity: 0, duration: 0.3 }, i - 0.15)
    .to(contents[i], { opacity: 1, duration: 0.3 }, i)
    .add(function () { frame.style.borderColor = frameColors[i]; }, i);
});
tl.add(function () { frame.style.borderColor = frameColors[0]; }, 0.01);