Course Full-Stack 3D Ecommerce
Build an ecommerce keyboard site with Three.js, Next.js 15, GSAP, and Prismic.
A 3D keyboard you can recolor, a switch playground you can try, and a Stripe checkout that actually charges. Built end to end, nothing handwaved.
Overview
About the course
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.
Stills
Visual highlights
A look at the some of the stunning graphics you'll create in this course.
