Sound, sculpted.
A premium hardware manufacturer launching their flagship smart speaker. We built a scrolling cinematic showcase featuring reactive WebGL material shaders and soundwave mechanics.
Project Overview
Aurora Audio is known for creating sculptural smart speakers that look more like stone monuments than consumer electronics. For the launch of their flagship product, a flat landing page of specs and product renders was out of the question. They needed a site that felt cinematic, auditory, and premium.
We designed a scroll-driven product story. Visitors descend through the speaker's layers—exploring the internal acoustic chamber, the custom-molded carbon chassis, and the reactive digital UI. By combining WebGL 3D elements with custom shader glows, we allowed users to interactively deconstruct the hardware.
The Challenge
Detailed 3D assets and rich shader effects are notoriously heavy for web environments, especially on mobile browsers. The objective was to build a cinematic experience that maintains a solid 60fps on mid-tier mobile devices while preserving the high-fidelity metal and carbon finishes.
High-density 3D geometry causes lag, heating up client phones and hurting conversion.
Use custom GLSL shaders and low-polygon LOD budgeting to deliver absolute visual depth at 60fps.
Design Direction
The visual palette is deeply dark, inspired by soundproof recording booths and anodized aluminum coatings. Bright, precise neon violet glows are used to represent acoustic energy and active interaction paths.
Showcase & Product Specs
Sleek custom vector diagrams demonstrating wave propagation and audio reflections in enclosed environments.
Detailed hardware breakdowns highlighting physical raw materials and internal speaker architecture specs.
Initial cone view
Chassis detail
Layer breakdown
Storyboard mockups explaining how the 3D smart speaker models rotate and disassemble relative to scroll.
Equalization display specs showing frequency adjustments and room calibration states in a dark dashboard format.
The Process & Build
We collaborated with industrial engineers to map out the story. We decided to anchor the site's scrolling behavior to the speaker's internal component layers, making structure the narrative.
We reduced the CAD models of the speaker to clean, low-polygon meshes. We baked lighting details directly into texture maps, allowing the speaker to look photorealistic without requiring heavy real-time GPU lighting calculation.
We wrote custom GLSL shaders in Three.js to represent audio waves reacting to page scroll. We restricted WebGL viewport updates specifically to active visibility states to prevent mobile battery drain.
Interaction Highlights
A Three.js particle canvas reacting directly to cursor hover velocity and scroll coordinates to simulate sonic vibrations.
Camera position coordinates bound directly to Lenis scroll ticks, smoothly disassembling the speaker as the user scroll-explores.
Clickable 3D callouts that dim the rest of the canvas and magnify spec labels for titanium, copper, and carbon parts.
Automatic pausing of the WebGL rendering loop when the speaker canvas element is scrolled out of the viewport.
The Outcome
The visual fidelity of the launch site successfully matched the speaker's premium retail price. By presenting the internal engineering in a structured, interactive format, we established absolute product credibility.
All launch speaker units claimed within first 48 hours
Unique site visits recorded during launch week
Smooth interactive frame rates recorded on mobile devices
We combine custom 3D WebGL assets, reactive physics, and interactive spec stories to build premium product showcases.