Skip to content
ATMOS: A Scroll-Driven Flight Through Procedural Skies

ATMOS: A Scroll-Driven Flight Through Procedural Skies

A tiny plane follows a spline through high-poly clouds and shifting gradients. Troika renders the text. A fake DoF blur keeps it cheap. LEEROY made the whole thing load without a progress bar.

Details

Maker
LEEROY
Published

What it is

ATMOS is what happens when a studio decides to make clouds look really, really good. LEEROY, the Montreal-based creative agency behind it, built a scroll-driven flight through a soft-edged world of aviation trivia. Your plane follows a Catmull-Rom spline that regenerates each time you load, which is a clever bit of procedural variation. The clouds aren't faking it. They're high-poly Blender models, DRACO-compressed and instanced with different transforms. Two models. That's it. Your brain fills in the variety.

The tech choices are deliberate. Troika handles 3D text rendering because overlaying HTML felt too detached. The depth-of-field effect? Not real DoF. It's a cheap 2D radial blur that keeps attention on what's approaching. The sky is an inward-facing sphere with animated Perlin noise gradients and a hemisphere light that shifts to match. Wind particles live in an InstancedMesh that's always there, just invisible until you scroll fast enough. The whole thing loads without a progress bar because it doesn't need one.

There's also a hidden elephant somewhere in ATMOS, positioned randomly on each load. Why not, right? Let's see if you find it.

How it’s made

Technology
Draco
Framework & Tool
Three.jsGSAPBlender
Interaction
Scroll Animation