Build an Ecommerce Keyboard Website with Three.js, Next.js 15, GSAP, and Prismic - Full Course 2025

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

Видео Build an Ecommerce Keyboard Website with Three.js, Next.js 15, GSAP, and Prismic - Full Course 2025 канала Prismic