🛹 Build a 3D skateboard customizer app and landing page with Next.js 15, GSAP, Prismic, Three.js, Tailwind, and TypeScript!
In this creative and fun course, we’ll create a stunning landing page and interactive customizer app for a fictional skateboard brand, Suburbia Skateboards. You’ll learn how to let users customize every detail of a skateboard in real time—from wheels to trucks to decks—while building a site packed with smooth animations and cutting-edge 3D interactions.
You’ll master Next.js 15, the latest version of the popular React framework, and Prismic, a CMS that makes dynamic content management easy. You’ll learn how to use react-three-fiber to bring Three.js into React for interactive 3D visuals. We’ll also use Tailwind CSS to style the site with ease and host it for free on Netlify!
We’ll start with a minimal starter to set everything up, and I’ll guide you step-by-step through the entire build.
By the end of this course, you’ll have created a polished, professional project that showcases advanced animations and 3D effects—perfect for impressing job prospects, clients, or just leveling up your portfolio.
—
🔗 Course Resources: https://prismic.io/courses/suburbia-skateboards
🔗 Final repository: https://github.com/a-trost/suburbia
🔗 Live Site: https://suburbia-skate.netlify.app/
—
📍 Chapters
00:00:00 : Intro
00:02:31 : Website Tour : Suburbia Skate
00:11:04 : Course Resources
00:12:23 : Create a Next.js 15 new project
00:21:15 : Set up Slice Machine
00:23:10 : Create the Homepage
00:46:01 : Adding Media from the resources page
00:58:50 : Handling fonts in Next.js 15
01:05:04 : Building the Hero (Part 2)
01:38:27 : Creating the Header
01:50:20 : Adding svg logo and squiggle effect
02:01:32 : Settings and Navigation
02:06:11 : React Server Components
02:11:05 : Product grid slice
02:19:07 : Enabling Live Preview
02:30:49 : Styling the Skateboard
02:58:35 : Building the 2nd Slice (Parallax)
03:22:46 : Adding Imgix params
03:41:42 : Create Slice Bundle
03:57:04 : Sticky positioning
04:01:02 : Video Component
04:23:35 : Team Members Slice
04:48:07 : Adding team members inside Prismic’s Page Builder
04:48:51 : Fun footer with physics
05:10:22 : Slide-in Animation
05:18:55 : 3D Hero with Three.js
05:22:07 : Set up Three.js Scene
05:26:23 : Fix React 19 Version mismatch
05:28:03 : Basic Three.js Scene
05:32:30 : Import Skateboard Model
05:37:21 : Add contact shadow
05:40:21 : Grip Tape Texture
05:49:58 : Add Metal texture
05:57:50 : Add Deck Texture
05:59:19 : Add Wheel Texture
06:02:25 : Add textures to Prismic
06:04:37 : Add textures to Skateboard
06:20:51 : Make wheels spin
06:27:37 : Getting started with GSAP
06:33:26 : Add GSAP to our scene
06:39:20 : Set up trick hitboxes
06:39:58 : Make skateboard tricks
06:47:39 : 3D board tricks with GSAP
06:59:35 : Add second group ref
07:03:19 : Add Hotspots
07:16:36 : Set up Camera
07:21:42 : Add Wavy Paths
07:32:22 : Handle Safari
07:36:18 : Prep for Customizer
07:40:10 : Create customizer custom types
07:44:54 : Architecture overview
07:46:05 : Create Build Page
07:50:59 : Create React Context to handle state
08:02:50 : Create Preview component
08:15:17 : Add Camera Controls
08:17:43 : Add lighting and floor
08:31:04 : Create Controls component
08:57:55 : Make camera move on click
09:02:59 : Edit URL state based on board design
09:10:37 : Finish Metadata setup
09:14:15 : Add URLs to homepage
09:16:34 : Make Loading component
09:20:16 : Deploy to GitHub
09:22:52 : Deploy to Netlify
09:26:50 : Finish Prismic Config
09:30:47 : Outro – Congratulations!
—
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
—
#nextjs #gsap #prismic
