CASE FILE 02 / 2025 / CREATIVE DEVELOPER
AETHER — IMMERSIVE BRAND.
A launch site for a hardware company built around a single continuous 3D scene. The hard requirement was that it had to run acceptably on a four-year-old phone, which ruled out almost everything the agency had pitched.
//The constraint#
The design was a single scene the visitor travels through, with the product assembling itself as they scroll. The client's own analytics said the median visitor was on a mid-range Android over a mobile connection. A conventional approach — high-poly models, physically based materials, real-time shadows, post-processing — would have been a twelve-megabyte download and a slideshow on that hardware.
//What I built#
Almost none of the visual richness came from geometry. The environment is a shader: layered noise for volumetric fog, an analytically raytraced ground plane, and light shafts computed per pixel rather than rendered as meshes. The product itself is the only real model, decimated to eleven thousand triangles with detail carried by a normal map and a hand-authored matcap rather than a lighting rig.
Scroll drove a single normalised progress value from zero to one. Every animated property in the scene was a pure function of that number — camera position, material parameters, fog density, the assembly sequence. Nothing accumulated state, which meant a visitor could scroll backwards, jump with a scrollbar drag, or reload mid-scene and land in a correct frame every time.
//Result and regrets#
2.1 megabytes initial payload, first contentful paint at 1.4 seconds on a throttled connection, a locked thirty frames per second on the target Android device and sixty on anything current. Regret: the reduced-motion fallback was built last, as a static render sequence. It works, but it's clearly a fallback rather than a designed alternative, and people who need it deserve better than an obvious compromise.
