dev3 ·
HELIOS is a landing page template built as one scroll-driven WebGL journey: from the Sun past every planet to Neptune in 11 chapters. A live demo is at dev3.tech/demos/helios.
Stack: Next.js 16, React Three Fiber 9, three.js, @react-three/postprocessing and Lenis.
Decisions that mattered
- Procedural everything. The Sun, planets, clouds, city lights, Saturn's rings and atmospheres are GLSL noise in
lib/shaders.ts, so the template downloads no textures or models. - A mutable journey store. Scroll progress, velocity and pointer live in a plain object read every frame, and React subscribes only to the chapter number, so scrolling never re-renders the tree.
- One camera path: each chapter adds a stop and a look target, joined by centripetal Catmull-Rom curves, and Lenis snaps to the nearest chapter when scrolling stops.
- Stops are offset so the subject sits away from the copy. On portrait screens they are rebuilt further back and lower.
- All shaders compile up front and the loader holds at 99% until finished, avoiding a first-scroll hitch.
Limits: it is a heavy WebGL experience by design, so it needs a capable device.
How we checked: a capture script visits every chapter at desktop, tablet and phone sizes and prints the frame rate.
Questions welcome.
#nextjs#threejs#r3f#case-study
0