Three.js Scroll Origami Crane Unfold — Panel Hinge Fold Animation

<section class="ogc-stage" id="ogcStage">
  <div class="ogc-intro-overlay"><p>Scroll ↓ to fold the flat sheet into a paper crane</p></div>
  <canvas id="ogcCanvas"></canvas>
  <div class="ogc-hud"><span id="ogcPct">0</span>% folded</div>
</section>
<section class="ogc-bottom"><p>A fully folded low-poly paper crane.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#120e08;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.ogc-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#c9a877;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.ogc-stage{height:100vh;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#231a0f 0%,#120e08 70%)}
.ogc-intro-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;z-index:5;color:#c9a877;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease;}
#ogcCanvas{display:block;width:100%;height:100%}
.ogc-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#f0d9a8;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('ogcCanvas');
const pctEl = document.getElementById('ogcPct');
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(48, 1, 0.1, 200);
camera.position.set(0, 5, 15);
camera.lookAt(0, 0, 0);
scene.add(new THREE.AmbientLight(0x554430, 1.3));
const key = new THREE.DirectionalLight(0xffe9c4, 1.4);
key.position.set(8, 12, 10);
scene.add(key);
const fill = new THREE.PointLight(0xffb27a, 0.9, 60);
fill.position.set(-8, -4, 8);
scene.add(fill);

// A "panel" is a flat triangular plane, pivoted at a hinge line via a wrapper
// Group. Rotating the group folds the panel out of the flat sheet plane.
// Each panel definition: geometry built in local space with the hinge at x=0,
// a pivot offset in the flat sheet, and a target fold angle (radians) plus
// axis reached at full fold.
const paperMat = new THREE.MeshStandardMaterial({ color: 0xe8d3a0, roughness: 0.75, metalness: 0.05, side: THREE.DoubleSide, emissive: 0x2a1f0d, emissiveIntensity: 0.3 });
const paperMatB = new THREE.MeshStandardMaterial({ color: 0xd8b878, roughness: 0.75, metalness: 0.05, side: THREE.DoubleSide, emissive: 0x241a0a, emissiveIntensity: 0.3 });

function makeTriPanel(w, h) {
  const geo = new THREE.BufferGeometry();
  const verts = new Float32Array([
    0, 0, 0,
    w, 0, 0,
    w * 0.5, h, 0,
  ]);
  geo.setAttribute('position', new THREE.BufferAttribute(verts, 3));
  geo.computeVertexNormals();
  return geo;
}

// Panel layout: body (center, static), two wing panels, a tail panel, a head/
// neck panel, split further into two sub-folds each for a crisper silhouette.
const panelDefs = [
  { geo: makeTriPanel(3.2, 4.2), mat: paperMat,  pivot: [0, 0, 0],   flatRot: [0, 0, 0],            axis: 'x', angle: 0 }, // body base, stays flat
  { geo: makeTriPanel(3.2, 3.4), mat: paperMatB, pivot: [-3.2, 0, 0], flatRot: [0, 0, 0],            axis: 'y', angle: -2.35 }, // left wing
  { geo: makeTriPanel(3.2, 3.4), mat: paperMat,  pivot: [3.2, 0, 0],  flatRot: [0, Math.PI, 0],      axis: 'y', angle: 2.35 }, // right wing
  { geo: makeTriPanel(2.0, 3.0), mat: paperMatB, pivot: [1.6, 4.2, 0], flatRot: [0, 0, Math.PI * 0.5], axis: 'x', angle: -1.55 }, // neck/head
  { geo: makeTriPanel(2.0, 2.4), mat: paperMat,  pivot: [-1.6, -4.2 * 0, 0.0], flatRot: [0, 0, -Math.PI * 0.5], axis: 'x', angle: 1.85 }, // tail
];

const pivots = panelDefs.map((def) => {
  const group = new THREE.Group();
  group.position.set(def.pivot[0], def.pivot[1], def.pivot[2]);
  group.rotation.set(def.flatRot[0], def.flatRot[1], def.flatRot[2]);
  const mesh = new THREE.Mesh(def.geo, def.mat);
  group.add(mesh);
  scene.add(group);
  return { group, axis: def.axis, angle: def.angle, seed: Math.random() };
});

const introEl = document.querySelector('.ogc-intro-overlay');
gsap.registerPlugin(ScrollTrigger);

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

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

const craneGroup = new THREE.Group();
pivots.forEach((p) => craneGroup.add(p.group));
scene.add(craneGroup);

function animate() {
  requestAnimationFrame(animate);
  if (introEl) introEl.style.opacity = (form.t > 0.03) ? '0' : '1';

  const t = form.t;
  const eased = t * t * (3 - 2 * t);

  // Panels fold in a staggered sequence: each panel's own fold progress is a
  // remapped slice of the overall eased progress, so later panels wait for
  // earlier ones to mostly finish before they start moving.
  pivots.forEach((p, i) => {
    const start = i * 0.12;
    const span = 0.55;
    let local = (eased - start) / span;
    local = Math.max(0, Math.min(1, local));
    const localEased = local * local * (3 - 2 * local);
    const amount = p.angle * localEased;
    if (p.axis === 'x') p.group.rotation.x = amount;
    else if (p.axis === 'y') p.group.rotation.y = amount;
    else p.group.rotation.z = amount;
  });

  craneGroup.rotation.y = eased * 0.9 + Math.sin(t * 0.001) * 0;
  craneGroup.position.y = -eased * 1.2;

  const camDist = 15 - eased * 4;
  camera.position.set(Math.sin(eased * 0.6) * 3, 5 - eased * 1, camDist);
  camera.lookAt(0, 1, 0);

  pctEl.textContent = Math.round(eased * 100);
  renderer.render(scene, camera);
}

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