Course
Learn Next.js 15, GSAP, Three.js and Prismic to build a 3D skateboard website!
A 9.5-hour course walking through the design, build, and deployment of Suburbia Skateboards: a Next.js 15 marketing site paired with a real-time 3D skateboard customizer in react-three-fiber, with design state synced to the URL for shareable configurations.
I designed and built Suburbia Skateboards, a branded marketing site with a 3D skateboard customizer, then taught the entire project in this course.
The customizer lets visitors swap deck textures, grip tape, trucks, and wheels on a Three.js skateboard in real time, with camera controls and board state encoded into the URL so configurations can be shared and linked. The marketing side layers GSAP-driven skate tricks onto a scroll-controlled 3D board, with wavy SVG camera paths, a physics-based footer, and sticky parallax sections. All content runs through Prismic’s page builder, so a non-developer can rearrange pages slice by slice.
I also spend real time on the architecture choices under the hood: managing 3D scene state with React Context, working around a React 19 version mismatch, handling Safari’s Three.js rendering quirks, and wiring texture uploads through Prismic so new skateboard designs can ship without a deploy.