3D Product Experience
NIMBUS
ROLE
SOLO BUILD — DESIGN & ENGINEERING
TIMELINE
SHIPPED · v1.0.0
SCOPE
STACK
OVERVIEW
A product page that behaves like a film: realistic 3D keyboards with PBR textures respond to scroll and cursor, while a real-time customizer lets visitors restyle keycaps and play with switch types.
The 3D layer runs on Three.js through React Three Fiber with drei utilities: physically-based keycap materials, dynamic lighting, camera moves eased between scroll positions, and mouse-parallax depth. GSAP ScrollTrigger conducts the timeline — wave cascades across the keys, content reveals, and a bidirectional marquee.
Every section is a Prismic slice — hero, color changer, switch playground, bento grid, purchase CTA — so content is CMS-editable without touching the scene code. Slice Machine keeps the component-driven content schema in sync.
Next.js 15 with Turbopack, React 19, Tailwind 4 and Radix primitives round out the stack, with static generation and code splitting keeping the heavy 3D payload off the critical path. WCAG motion preferences are respected throughout.
OUTCOMES
Static product pages don't sell hardware — cinematography does.