Build an Ecommerce Keyboard Website with Three.js, Next.js 15, GSAP, and Prismic
Nimbus Keyboards is a fictional mechanical keyboard brand I designed and built for this course. The site opens with a Three.js keyboard that animates into place as visitors scroll, built with react-three-fiber and orchestrated through GSAP’s ScrollTrigger. Visitors can recolor keycaps in a custom Color Changer slice, try out switches in an interactive Switch Playground, and run through a real Stripe checkout that feels shippable rather than staged.
The project is typed end to end in TypeScript, styled with Tailwind, assembled through Prismic’s page builder, and deployed to Vercel. In the course I walk through every architectural decision: loading and caching the 3D model, timing GSAP timelines against scroll, wiring a production Stripe integration inside a Next.js route handler, and building a loading screen that masks the initial 3D boot time.