Robotext WiFi 3D Site
A scroll-driven 3D product launch page built for a client.
Overview
A launch site for a physical product, Robotext WiFi, built to make it feel premium online. It uses big type and a scroll-driven 3D scene that reveals the product as you move down the page. This one was client work.
The problem
The client had a product to sell, and a plain page would have undersold it. New hardware lives or dies on first impression, and a generic template would have made it look like everything else out there.
What they wanted was a page that feels expensive, points people toward ordering, and still loads quickly on a phone.
The solution
I designed and built a landing page where the story unfolds as you scroll, with a 3D centrepiece and motion timed to keep your attention moving toward the order button.
The heavy visuals load only when they're needed and lean on the GPU, and the motion backs off for reduced-motion and smaller screens. So it stays fast without giving up the moment that makes people stop.
Architecture
A Next.js base with a layered motion system: smooth scroll driving the scroll-triggered timelines and the 3D scene, sitting on a responsive, performance-first foundation.
- Scroll-driven reveals that build toward the call to action
- A 3D centrepiece used where it earns the load, not everywhere
- Heavy visuals lazy-loaded to protect performance
- Motion backs off for reduced-motion and mobile
Screens & diagrams
shotKey features
A 3D product moment
A WebGL scene that makes the hardware feel real instead of a photo on a page.
Scroll that tells a story
Timed reveals walk the visitor through the pitch and toward ordering.
Pointed at the sale
Every section nudges attention toward the order button.
Fast and accessible
Rich motion that still runs on a phone and respects reduced-motion.
Implementation highlights
- Delivered a client launch page that made a small brand's product look established.
- Used 3D and scroll motion where it actually adds something, rather than decorating the whole page with it.
- Loaded the heavy visuals lazily so the page stays quick on mobile.
- Put the motion behind reduced-motion checks so it degrades cleanly for people who need that.
Challenges solved
Impressive without the weight
3D and scroll effects get heavy fast. Lazy loading and being picky about where to use them kept it quick on real phones.
Guiding, not just showing off
The motion had to earn its place by moving people toward ordering, not just looking clever.
Technologies
Future improvements
- Test different scroll narratives and CTA placements
- Show product variants in the 3D scene