A scroll-driven WebGL narrative
ÆTHER is a fictional applied intelligence studio, and its site is a single continuous descent. A persistent Three.js stage renders a procedural metallic form whose displacement, colour, lighting and camera are choreographed to the scroll. The story unfolds in three acts (Perception, Reasoning, Autonomy), each with its own colour mood, as the form morphs from a calm sphere into something more alive.
Key Features
Scroll-choreographed 3D — GSAP ScrollTrigger drives the form’s displacement, colour moods, camera dolly and bloom through a smoothed animation state, so motion stays fluid and physical
Custom GLSL shaders — simplex-noise displacement with a fresnel-driven iridescent metal surface, an atmospheric particle field and a billboarded backlight glow
Cinematic postprocessing — Unreal bloom and bokeh depth-of-field, finished with film grain, a vignette, a custom cursor and a counting preloader
Technical Highlights
Built with Three.js, GSAP ScrollTrigger and Lenis smooth scroll, bundled with Vite — no framework
Performance-adaptive — caps pixel ratio, reduces geometry and particle counts on mobile, and automatically drops depth-of-field if the frame rate sags
Respects prefers-reduced-motion, pauses rendering in hidden tabs, and falls back gracefully when WebGL is unavailable
