Three.js Scroll Fold Cards — GSAP Staggered 3D Card Deal

<section class="fld-top"><p>Scroll ↓ to deal the cards</p></section>
<section class="fld-stage" id="fldStage">
  <canvas id="fldCanvas"></canvas>
</section>
<section class="fld-bottom"><p>All cards face up.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0a0812;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.fld-top,.fld-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#7c749c;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.fld-stage{height:100vh;position:relative;overflow:hidden;background:radial-gradient(70% 65% at 50% 42%,#171130,#0a0812)}
#fldCanvas{display:block;width:100%;height:100%}

const canvas = document.getElementById('fldCanvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 100);
camera.position.set(0, 0, 12);
camera.lookAt(0, 0, 0);

scene.add(new THREE.AmbientLight(0xffffff, 0.75));
const key = new THREE.DirectionalLight(0xffffff, 1.0); key.position.set(2, 5, 8); scene.add(key);

// A fan of cards that starts collapsed in a single stacked pile at screen left
// (rotated edge-on, invisible) and, as the visitor scrolls, each card flips
// face-up and slides to its place in an even row — a "dealing" reveal.
const CARDS = 7;
const colors = [0x60a5fa, 0xf472b6, 0xfbbf24, 0x34d399, 0xa78bfa, 0xf87171, 0x22d3ee];
const cards = [];
for (let i = 0; i < CARDS; i++) {
  // Rounded-ish card via a thin box; front face colored, back face dark.
  const card = new THREE.Mesh(
    new THREE.BoxGeometry(2, 3, 0.08),
    [
      new THREE.MeshStandardMaterial({ color: 0x1e1b33, roughness: 0.7 }),
      new THREE.MeshStandardMaterial({ color: 0x1e1b33, roughness: 0.7 }),
      new THREE.MeshStandardMaterial({ color: 0x1e1b33, roughness: 0.7 }),
      new THREE.MeshStandardMaterial({ color: 0x1e1b33, roughness: 0.7 }),
      new THREE.MeshStandardMaterial({ color: colors[i], roughness: 0.4, metalness: 0.2, emissive: colors[i], emissiveIntensity: 0.15 }),
      new THREE.MeshStandardMaterial({ color: 0x141024, roughness: 0.8 }),
    ]
  );
  const targetX = (i - (CARDS - 1) / 2) * 2.35;   // final position in the row
  card.userData = { targetX, delay: i / CARDS };  // staggered deal order
  scene.add(card);
  cards.push(card);
}

gsap.registerPlugin(ScrollTrigger);

const state = { p: 0 };
gsap.to(state, {
  p: 1, ease: 'none',
  scrollTrigger: {
    trigger: '#fldStage', start: 'top top', end: '+=450%', scrub: 0.6, pin: true,
  },
});

function smooth(t) { t = Math.max(0, Math.min(1, t)); return t * t * (3 - 2 * t); }

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

function animate() {
  requestAnimationFrame(animate);
  cards.forEach((card) => {
    const u = card.userData;
    // Each card gets its own slice of the scroll: it deals over the window
    // [delay, delay + span]. Earlier cards finish before later ones start.
    const span = 0.55;
    const local = smooth((state.p - u.delay * (1 - span)) / span);
    // Rotate from edge-on (PI/2, hidden) to face-up (0), slide from the pile
    // at left to the target X, and rise from below into place.
    card.rotation.y = (1 - local) * (Math.PI / 2);
    card.position.x = (1 - local) * -7 + local * u.targetX;
    card.position.y = (1 - local) * -3;
    card.position.z = (1 - local) * -2;
    card.material.forEach(m => { m.opacity = local; m.transparent = local < 1; });
  });
  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();