Three.js Scroll Seasons Tree — Keyframe Color Grading

<section class="ssn-stage" id="ssnStage">
  <div class="ssn-intro"><p>Scroll ↓ to pass a year</p></div>
  <canvas id="ssnCanvas"></canvas>
  <div class="ssn-hud" id="ssnSeason">SPRING</div>
</section>
<section class="ssn-bottom"><p>And spring comes back around.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0f141a;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.ssn-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#8fa3b0;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.ssn-stage{height:100vh;position:relative;overflow:hidden;background:#0f141a}
.ssn-intro{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;z-index:5;color:#dbeafe;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease}
#ssnCanvas{display:block;width:100%;height:100%}
.ssn-hud{position:absolute;left:24px;bottom:24px;font-size:13px;letter-spacing:.2em;color:#a7f3d0;text-transform:uppercase;opacity:.85;transition:color .5s}

const canvas = document.getElementById('ssnCanvas');
const seasonEl = document.getElementById('ssnSeason');
const introEl = document.querySelector('.ssn-intro');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 300);

scene.add(new THREE.AmbientLight(0xffffff, 0.55));
const sun = new THREE.DirectionalLight(0xffffff, 1.0);
sun.position.set(18, 30, 14);
scene.add(sun);

function rand(seed) {
  const x = Math.sin(seed * 113.5 + 271.9) * 43758.5453;
  return x - Math.floor(x);
}

// Ground disc — its color is season-graded along with everything else.
const ground = new THREE.Mesh(
  new THREE.CircleGeometry(60, 64),
  new THREE.MeshLambertMaterial({ color: 0x2d4a2f })
);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

// Low-poly trunk + branches.
const wood = new THREE.MeshLambertMaterial({ color: 0x4a3426 });
const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.9, 1.4, 9, 8), wood);
trunk.position.y = 4.5;
scene.add(trunk);
const branches = [];
for (let i = 0; i < 6; i++) {
  const b = new THREE.Mesh(new THREE.CylinderGeometry(0.22, 0.42, 5.5, 6), wood);
  const a = (i / 6) * Math.PI * 2 + rand(i) * 0.7;
  b.position.set(Math.cos(a) * 2.2, 8 + rand(i + 50) * 2.2, Math.sin(a) * 2.2);
  b.rotation.z = Math.cos(a) * 1.0;
  b.rotation.x = -Math.sin(a) * 1.0;
  scene.add(b);
  branches.push(b);
}

// Foliage: 90 icosahedron puffs on the crown. Season drives their color,
// scale (bare in winter), and emissive blossom tint in spring.
const PUFFS = 90;
const puffs = [];
for (let i = 0; i < PUFFS; i++) {
  const theta = rand(i) * Math.PI * 2, phi = Math.acos(2 * rand(i + 900) - 1);
  const r = 4.2 * Math.cbrt(rand(i + 1800));
  const mat = new THREE.MeshLambertMaterial({ color: 0x67b26f });
  const m = new THREE.Mesh(new THREE.IcosahedronGeometry(0.9 + rand(i + 2700) * 0.8, 0), mat);
  m.position.set(
    Math.sin(phi) * Math.cos(theta) * r * 1.15,
    11.5 + Math.cos(phi) * r * 0.75,
    Math.sin(phi) * Math.sin(theta) * r * 1.15
  );
  scene.add(m);
  puffs.push({ m, mat, phase: rand(i + 3600) * Math.PI * 2, scale: m.scale.x });
}

// One recycled particle system plays blossom petals (spring), falling
// leaves (autumn), and snow (winter) — only color/size/behavior change.
const FLAKES = 400;
const flakeGeo = new THREE.BufferGeometry();
const flakePos = new Float32Array(FLAKES * 3);
const flakeSeed = [];
for (let i = 0; i < FLAKES; i++) {
  flakePos[i * 3] = (rand(i + 5e3) - 0.5) * 44;
  flakePos[i * 3 + 1] = rand(i + 6e3) * 22;
  flakePos[i * 3 + 2] = (rand(i + 7e3) - 0.5) * 44;
  flakeSeed.push(rand(i + 8e3));
}
flakeGeo.setAttribute('position', new THREE.BufferAttribute(flakePos, 3));
const flakeMat = new THREE.PointsMaterial({ color: 0xffc4dd, size: 0.3, transparent: true, opacity: 0.9, sizeAttenuation: true });
const flakes = new THREE.Points(flakeGeo, flakeMat);
scene.add(flakes);

// Season keyframes: sky, ground, foliage, light color/intensity, foliage
// scale, particle color and opacity. Year progress lerps between them.
const K = [
  { sky: 0x9fd3e8, ground: 0x3d6b3f, leaf: 0x7cc47f, light: 0xfff7e0, li: 1.0, scale: 0.85, pc: 0xffc4dd, po: 0.9, name: 'SPRING', hud: '#a7f3d0' },
  { sky: 0x87c8f0, ground: 0x2f5e31, leaf: 0x2e8b3d, light: 0xfff2c4, li: 1.25, scale: 1.1, pc: 0xffffff, po: 0.0, name: 'SUMMER', hud: '#86efac' },
  { sky: 0xd9b38c, ground: 0x6b5232, leaf: 0xd97b29, light: 0xffdba8, li: 0.85, scale: 0.95, pc: 0xe8933a, po: 0.85, name: 'AUTUMN', hud: '#fdba74' },
  { sky: 0xbfd3de, ground: 0xdfe8ee, leaf: 0xf4f8fb, light: 0xdce9f5, li: 0.6, scale: 0.12, pc: 0xffffff, po: 0.95, name: 'WINTER', hud: '#bae6fd' },
  // Wrap target = spring again, so the year closes its loop.
  { sky: 0x9fd3e8, ground: 0x3d6b3f, leaf: 0x7cc47f, light: 0xfff7e0, li: 1.0, scale: 0.85, pc: 0xffc4dd, po: 0.9, name: 'SPRING', hud: '#a7f3d0' },
];
const cA = new THREE.Color(), cB = new THREE.Color(), cOut = new THREE.Color();
function lerpHex(a, b, f, into) {
  cA.setHex(a); cB.setHex(b);
  into.copy(cA).lerp(cB, f);
  return into;
}

scene.background = new THREE.Color(K[0].sky);

gsap.registerPlugin(ScrollTrigger);
const year = { p: 0 };
gsap.to(year, {
  p: 1,
  ease: 'none',
  scrollTrigger: { trigger: '#ssnStage', start: 'top top', end: '+=500%', scrub: 0.5, pin: true },
});

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

const clock = new THREE.Clock();
function animate() {
  requestAnimationFrame(animate);
  const t = clock.getElapsedTime();
  const p = year.p;
  if (introEl) introEl.style.opacity = p > 0.02 ? '0' : '1';

  // Which pair of season keyframes are we between?
  const seg = Math.min(3.999, p * 4);
  const i0 = Math.floor(seg), f = seg - i0;
  // Smoothstep the blend so each season holds near its center.
  const sf = f * f * (3 - 2 * f);
  const A = K[i0], B = K[i0 + 1];

  scene.background = lerpHex(A.sky, B.sky, sf, cOut).clone();
  ground.material.color.copy(lerpHex(A.ground, B.ground, sf, cOut));
  sun.color.copy(lerpHex(A.light, B.light, sf, cOut));
  sun.intensity = A.li + (B.li - A.li) * sf;

  const leafC = lerpHex(A.leaf, B.leaf, sf, cOut).clone();
  const scale = A.scale + (B.scale - A.scale) * sf;
  puffs.forEach((pf) => {
    pf.mat.color.copy(leafC);
    const s = pf.scale * scale * (1 + Math.sin(t * 1.2 + pf.phase) * 0.03);
    pf.m.scale.setScalar(Math.max(0.001, s));
  });

  flakeMat.color.copy(lerpHex(A.pc, B.pc, sf, cOut));
  flakeMat.opacity = A.po + (B.po - A.po) * sf;
  flakeMat.size = 0.22 + flakeMat.opacity * 0.16;
  const fp = flakes.geometry.attributes.position;
  for (let i = 0; i < FLAKES; i++) {
    let y = fp.array[i * 3 + 1] - (0.02 + flakeSeed[i] * 0.035);
    fp.array[i * 3] += Math.sin(t * 0.8 + flakeSeed[i] * 9) * 0.012;
    if (y < 0) y = 22;
    fp.array[i * 3 + 1] = y;
  }
  fp.needsUpdate = true;

  const cur = f < 0.5 ? A : B;
  seasonEl.textContent = cur.name;
  seasonEl.style.color = cur.hud;

  const ang = 0.4 + p * Math.PI * 1.05 + t * 0.02;
  camera.position.set(Math.sin(ang) * 30, 10 + Math.sin(t * 0.25) * 0.6, Math.cos(ang) * 30);
  camera.lookAt(0, 9, 0);

  renderer.render(scene, camera);
}

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