--- title: Case Study: Three.js Product Launch Experience description: A hardware launch site built as one continuous 3D scene, with the hard requirement that it still run acceptably on a four-year-old Android phone. canonical: https://www.hire-web-dev.com/work/aether/ section: Case studies updated: 2026-09-11 author: SumanKumar Phuyal site: hire-web-dev.com note: >- Generated from the page of record at the canonical URL above. The four case studies are placeholder work and their metrics were never measured; imagery is AI-generated concept art. See https://www.hire-web-dev.com/disclosure/. --- # 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. ## Key facts - Year: 2025 - Role: Creative developer - Stack: Three.js / GLSL / GSAP - Budget: 2.1 MB initial ## Case file - Year: 2025 - Role: Creative developer - Triangles: 11k - Target: 30 fps on 2021 Android ## Topics THREE.JS, GLSL, GSAP, REACT, SHADERS, SCROLL CHOREOGRAPHY ## Image ![Chrome sphere trailing a ribbon of cyan particles, a material and motion study for a product launch scene](https://www.hire-web-dev.com/assets/img/aether-chrome-sphere-particle-trail.jpg)