Three.js Scroll DNA Helix Unwind — 3D Double Helix Animation

<section class="dhx-stage" id="dhxStage">
  <div class="dhx-intro-overlay"><p>Scroll ↓ to unwind the compressed double helix</p></div>
  <canvas id="dhxCanvas"></canvas>
  <div class="dhx-hud"><span id="dhxPct">0</span>% unwound</div>
</section>
<section class="dhx-bottom"><p>A fully extended, readable double helix.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#04050a;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.dhx-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#7fa8b8;font-size:15px;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:0 24px}
.dhx-stage{height:100vh;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#0a1420 0%,#04050a 70%)}
.dhx-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:#7fa8b8;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease;}
#dhxCanvas{display:block;width:100%;height:100%}
.dhx-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#5ee6d0;text-transform:uppercase;opacity:.85}

const canvas = document.getElementById('dhxCanvas');
const pctEl = document.getElementById('dhxPct');
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(55, 1, 0.1, 200);
scene.add(new THREE.AmbientLight(0x334455, 1.2));
const key = new THREE.PointLight(0x5ee6d0, 1.4, 100);
key.position.set(10, 10, 14);
scene.add(key);
const rim = new THREE.PointLight(0xff5ec4, 1.0, 100);
rim.position.set(-12, -8, -10);
scene.add(rim);

// Each base-pair index i owns two backbone points (strand A / strand B) and one
// rung connecting them. Start state is tightly twisted + compressed; end state
// is loosely twisted + extended. All geometry lives in flat Float32Arrays so the
// render loop only rewrites numbers, never allocates.
const N = 70;
const RADIUS = 2.6;
const TWIST_START = 46;   // total radians of twist across the strand, compressed
const TWIST_END = 15;     // total radians of twist across the strand, unwound
const HEIGHT_START = 7;   // compressed total height
const HEIGHT_END = 34;    // extended total height

const angleA0 = new Float32Array(N), angleA1 = new Float32Array(N);
const y0 = new Float32Array(N), y1 = new Float32Array(N);
for (let i = 0; i < N; i++) {
  const s = i / (N - 1);
  angleA0[i] = s * TWIST_START;
  angleA1[i] = s * TWIST_END;
  y0[i] = (s - 0.5) * HEIGHT_START;
  y1[i] = (s - 0.5) * HEIGHT_END;
}

const sphereGeo = new THREE.SphereGeometry(0.34, 12, 12);
const matA = new THREE.MeshStandardMaterial({ color: 0x5ee6d0, emissive: 0x0f3d38, roughness: 0.4, metalness: 0.3 });
const matB = new THREE.MeshStandardMaterial({ color: 0xff5ec4, emissive: 0x3d0f2e, roughness: 0.4, metalness: 0.3 });
const strandA = new THREE.InstancedMesh(sphereGeo, matA, N);
const strandB = new THREE.InstancedMesh(sphereGeo, matB, N);
scene.add(strandA, strandB);

// Rungs: one thin cylinder per base pair, instanced and rescaled/reoriented per frame.
const rungGeo = new THREE.CylinderGeometry(0.07, 0.07, 1, 6);
rungGeo.translate(0, 0.5, 0);
rungGeo.rotateX(Math.PI / 2);
const rungMat = new THREE.MeshStandardMaterial({ color: 0xd9c98a, emissive: 0x332c10, roughness: 0.6, metalness: 0.1 });
const rungs = new THREE.InstancedMesh(rungGeo, rungMat, N);
scene.add(rungs);

const dummy = new THREE.Object3D();
const pA = new THREE.Vector3(), pB = new THREE.Vector3(), mid = new THREE.Vector3();

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

const form = { t: 0 };
gsap.to(form, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#dhxStage',
    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();
}

let spin = 0;

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);

  for (let i = 0; i < N; i++) {
    const ang = angleA0[i] + (angleA1[i] - angleA0[i]) * eased;
    const y = y0[i] + (y1[i] - y0[i]) * eased;

    pA.set(Math.cos(ang) * RADIUS, y, Math.sin(ang) * RADIUS);
    pB.set(Math.cos(ang + Math.PI) * RADIUS, y, Math.sin(ang + Math.PI) * RADIUS);

    dummy.position.copy(pA);
    dummy.rotation.set(0, 0, 0);
    dummy.updateMatrix();
    strandA.setMatrixAt(i, dummy.matrix);

    dummy.position.copy(pB);
    dummy.updateMatrix();
    strandB.setMatrixAt(i, dummy.matrix);

    mid.copy(pA).add(pB).multiplyScalar(0.5);
    const dist = pA.distanceTo(pB);
    dummy.position.copy(pA);
    dummy.scale.set(1, 1, dist);
    dummy.lookAt(pB);
    dummy.updateMatrix();
    rungs.setMatrixAt(i, dummy.matrix);
  }
  strandA.instanceMatrix.needsUpdate = true;
  strandB.instanceMatrix.needsUpdate = true;
  rungs.instanceMatrix.needsUpdate = true;

  spin += 0.0016 * (0.4 + eased);
  const group = 0; // no wrapper group needed, orbit the camera instead
  const camRadius = 16 - eased * 2;
  const camHeight = (y0[0] + (y1[0] - y0[0]) * eased) * 0.15;
  camera.position.set(Math.sin(spin) * camRadius, camHeight, Math.cos(spin) * camRadius);
  camera.lookAt(0, 0, 0);

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

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