Home / Creative & Motion / Shoal, Scroll-Driven Product Launch
Shoal, Scroll-Driven Product Launch
A hardware brand needs a launch page where the product is the story, and the camera moves with the reader.
The brief and the build
Brief: Build a single-page launch site for a fictional desktop synth with a 3D hero the camera flies around as you scroll, a finish picker that recolours it live, and lighter fallbacks for phones, reduced motion and no WebGL.
Shoal is a made-up four-voice desktop synth. The model is built in code, and the camera travels around it through six sections: hero, craft, sound, specs, a finish picker and a reserve call to action. The finish picker recolours the model and plays a real note. Smooth scrolling, a loader and a desktop cursor round it out.
Phones get a lighter scene, visitors who prefer reduced motion get a calm version, and browsers without WebGL get a readable fallback.
Results
- Lighthouse, desktop: Performance 92 to 98, Accessibility 100, Best Practices 100, SEO 100.
- Lighthouse, mobile profile: Performance 62 to 77, with 100 in the other three. The lab figure is pessimistic because headless Chrome draws WebGL in software.
- Checked: screenshots at 1440, 390 and reduced motion with no console errors; the finish picker, sliders and no-WebGL fallback all work.
- Not yet tested: a real phone, and a 60 fps measurement.
Stack
Highlights
- Scroll-scrubbed camera
- Procedural 3D model
- Live finish configurator
- Sound
- Reduced-motion and no-WebGL fallbacks
Need something like this?
Tell me what you're building and I'll tell you how I'd approach it.