Mar 2
Loading video player...
In this new course, we’ll build a GSAP animated 3D website for a fictional keyboard brand called Nimbus. You’ll learn how to use the latest features of Next.js 15, Prismic, GSAP and Three.js to bring a 3D keyboard to life as you scroll, as well as many more fun and eye-catching effects. All of our code is in TypeScript so that we can code with clarity and confidence. We'll also integrate a Stripe checkout into our Next.js and Prismic site, with a ready-to-use checkout page that feels completely real and ready to use. We use Tailwind CSS for all of our styling, and you'll deploy your finished site with Vercel! This course is perfect for developers who want to learn how to integrate and animate 3D models into their Next.js websites. We'll start from the basics and work up to learn react-three-fiber, React's Three.js implementation. 🔗 Course instructions and resources : https://prismic.io/courses/nimbus-keyboards 🔗 Final website : https://nimbus-keyboards-demo.vercel.app/ 🔗 GitHub repository : https://github.com/a-trost/nimbus-keyboards --- 📍 Chapters: 00:00:00 - Intro - Nimbus Keyboard (3D Website) 00:01:23 - Website Walkthrough 00:02:33 - Create Next App 00:39:34 - Create Hero Slice 01:27:50 - Add Three.js 02:12:40 - Add Keycap model 02:49:25 - Add Bento Box Slice 03:07:41 - Create Color Changer Slic 03:56:37 - Add GSAP 04:27:21 - Add FadeIn Component 04:40:43 - Add Animations to Hero Slice 05:22:49 - Add Hero scroll animation 05:50:06 - Create Switch Playground Slice 06:51:38 - Create Marquee Slice 07:08:17 - Create Purchase Button Slice 07:42:30 - Add Stripe integration 08:10:56 - Create Loading Screen 08:32:42 - Deploy our Next.js site (GitHub & Vercel) --- #nextjs #threejs #gsap #prismic