Built step by step with Slice Machine, GSAP animations, and secure checkout flow.
- ✨ Introduction
- ⚙️ Tech Stack
- 🔋 Features
- 🤸 Quick Start
- 🧱 Project Structure
- 📝 Customization
- 📄 License
- 🔗 Contacts
Nimbus Keyboards is a 3D interactive keyboard showcase website. Users can explore keyboard models, switch types, and keycaps in 3D with smooth animations. The site also integrates Stripe Checkout for secure, real-world payment flows — making it a mini e-commerce experience.
It leverages Next.js 15, TailwindCSS, Prismic CMS, and React Three Fiber to deliver immersive interactions and content-driven layouts.
- Next.js 15 – Full-stack React framework for SSR, SSG, and ISR.
- React 19 (RC) – Component-based UI library.
- TypeScript 5 – Static typing for safer, maintainable code.
- Tailwind CSS 3.4 – Utility-first CSS framework.
- Fluid Tailwind – Responsive fluid typography & spacing.
- clsx – Conditional class management for dynamic styling.
- React Icons – Ready-to-use icon sets.
-
Prismic CMS – Headless CMS for managing dynamic content.
@prismicio/client,@prismicio/react,@prismicio/next– Prismic SDKs for Next.js integration.
-
Slice Machine – Local custom type & slice builder for content modeling.
- GSAP 3.12 – Timeline-based animations for smooth transitions.
- @gsap/react – GSAP integration with React components.
- Three.js 0.171 – 3D rendering engine.
- React Three Fiber – React renderer for Three.js.
- @react-three/drei – Helpers & controls for React Three Fiber.
- Stripe Checkout – Secure payment gateway for checkout flows.
- ESLint +
eslint-config-next– Linting and code quality. - PostCSS – CSS processing.
- Turbopack – Fast local dev server (
next dev).
- Landing Page – Hero section with immersive 3D keyboard.
- 3D Keyboard Models – Rotate, zoom, and interact with keyboard layouts.
- Switch Playground – Explore switches in 3D for tactile comparison.
- Keycap Changer – Visualize custom keycap sets in real-time.
- Dynamic Content – Manage content via Prismic CMS.
- Smooth Animations – Powered by GSAP timelines and ScrollTrigger.
- Secure Payments – Stripe Checkout integration for real transactions.
- Responsive Design – Desktop, tablet, and mobile friendly.
git clone https://github.com/Itssanthoshhere/Nimbus-Keyboard-3D.git
cd Nimbus-Keyboardsnpm installCreate a .env.local file and add your Stripe keys:
STRIPE_PUBLIC_KEY=your_public_key
STRIPE_SECRET_KEY=your_secret_keynpm run devVisit http://localhost:3000 to view the project.
| File/Component | Description |
|---|---|
app/layout.tsx |
Layout wrapper and global providers |
app/page.tsx |
Homepage rendering |
slices/*/index.tsx |
Prismic slice components |
components/Bounded.tsx |
Layout wrapper with consistent padding |
components/Navbar.tsx |
Header navigation bar with menu and checkout button |
components/Footer.tsx |
Footer with links and branding |
components/Loader.tsx |
Loader animation for 3D canvas |
components/Scene.tsx |
3D scene for keyboards using React Three Fiber |
utils/stripe.ts |
Stripe checkout configuration & helpers |
- Open Prismic Dashboard
- Create a new Page
- Add slices (heading, body, 3D components)
- Publish and view at
/your-page-slug
Supports Prismic Preview Mode for local dev. 🔗 Preview Drafts in Next.js
- GitHub: Itssanthoshhere
- LinkedIn: Santhosh VS
This project is for educational purposes only and is not affiliated with or endorsed by Prismic, Next.js, Stripe, or any other third-party tools mentioned.
Learn Next.js 15, GSAP, Three.js and Prismic to build a 3D skateboard website by Prismic
All trademarks and assets belong to their respective owners.
If you liked this project, give it a ⭐ and share it with your network!