Three.js Scroll Solar Eclipse Transit — Corona Reveal Animation

<section class="sec-stage" id="secStage">
  <div class="sec-intro-overlay"><p>Scroll ↓ to bring the moon into alignment with the sun</p></div>
  <canvas id="secCanvas"></canvas>
  <div class="sec-hud"><span id="secPct">0</span>% eclipsed</div>
</section>
<section class="sec-bottom"><p>Total eclipse — the corona blazes around a darkened sun.</p></section>

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

const canvas = document.getElementById('secCanvas');
const pctEl = document.getElementById('secPct');
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(42, 1, 0.1, 200);
camera.position.set(0, 0, 22);
camera.lookAt(0, 0, 0);

// Background starfield: a light static point cloud so the deep-space setting
// reads immediately, built once as a single BufferGeometry.
const STAR_COUNT = 900;
const starPos = new Float32Array(STAR_COUNT * 3);
for (let i = 0; i < STAR_COUNT; i++) {
  starPos[i * 3] = (Math.random() - 0.5) * 140;
  starPos[i * 3 + 1] = (Math.random() - 0.5) * 140;
  starPos[i * 3 + 2] = (Math.random() - 0.5) * 80 - 20;
}
const starGeo = new THREE.BufferGeometry();
starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
const starMat = new THREE.PointsMaterial({ size: 0.12, color: 0xffffff, transparent: true, opacity: 0.6 });
scene.add(new THREE.Points(starGeo, starMat));

// Sun: emissive sphere, fixed at the origin.
const sunGeo = new THREE.SphereGeometry(3.4, 48, 48);
const sunMat = new THREE.MeshBasicMaterial({ color: 0xffd27a });
const sun = new THREE.Mesh(sunGeo, sunMat);
scene.add(sun);
const sunGlow = new THREE.PointLight(0xffcf8a, 2.2, 80);
scene.add(sunGlow);

// Moon: dark sphere, starts offset far to one side and slides in front of the
// sun as scroll progresses.
const moonGeo = new THREE.SphereGeometry(3.42, 48, 48);
const moonMat = new THREE.MeshStandardMaterial({ color: 0x0a0a12, roughness: 0.9, metalness: 0 });
const moon = new THREE.Mesh(moonGeo, moonMat);
moon.position.set(-16, 3, 6);
scene.add(moon);
const rim = new THREE.PointLight(0x7799ff, 0.5, 40);
rim.position.set(-10, 6, 12);
scene.add(rim);

// Corona: an additive-blended ring sprite behind the sun, faded in only near
// full alignment.
const coronaGeo = new THREE.RingGeometry(3.5, 7.2, 64);
const coronaMat = new THREE.MeshBasicMaterial({
  color: 0xfff0c4,
  transparent: true,
  opacity: 0,
  blending: THREE.AdditiveBlending,
  side: THREE.DoubleSide,
  depthWrite: false,
});
const corona = new THREE.Mesh(coronaGeo, coronaMat);
scene.add(corona);

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

const form = { t: 0 };
gsap.to(form, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#secStage',
    start: 'top top',
    end: '+=420%',
    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 moonStart = new THREE.Vector3(-16, 3, 6);
const moonEnd = new THREE.Vector3(0, 0, 6);

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

  moon.position.lerpVectors(moonStart, moonEnd, eased);
  moon.rotation.y += 0.001;
  rim.position.copy(moon.position).add(new THREE.Vector3(6, 3, 6));

  // Alignment closeness: 1 when moon is centered on the sun (x,y both ~0),
  // 0 when far away. Drives corona opacity and sun dimming.
  const dx = moon.position.x - sun.position.x;
  const dy = moon.position.y - sun.position.y;
  const dist = Math.sqrt(dx * dx + dy * dy);
  const alignment = Math.max(0, 1 - dist / 3.4);
  const alignmentSmooth = alignment * alignment;

  corona.material.opacity = alignmentSmooth * 0.9;
  corona.scale.setScalar(1 + alignmentSmooth * 0.15);
  corona.lookAt(camera.position);

  sunGlow.intensity = 2.2 - alignmentSmooth * 1.7;
  sun.material.color.setRGB(1, 0.82 + alignmentSmooth * 0.1, 0.48 + alignmentSmooth * 0.3);

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

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