Built for the bold. Typing reinvented.
Live Demo • Features • Tech Stack • Getting Started
A modern product showcase for Vapor75 by Nimbus Keyboards. Premium landing experience with 3D keyboard visualization, interactive switch playground, custom keycap configurator, and smooth animations.
- Hero — Bold headline and CTA with 3D keyboard
- Vapor75 feature grid — Aluminum case, interchangeable knob, cross-platform, hot-swap, custom keycap profile, E-Ink display
- Switch playground — Try Ocean Blue, Crimson Red, Dark Amber, Midnight Black with sound
- Custom keycaps — Goodwell, Dreamboard, Cherry Navy, Kick, Old School, Candy Keys with live preview
- Purchase section — CTA with shipping, guarantee, and warranty copy
- Responsive — Layout and 3D scale for desktop and mobile
- Animations — GSAP-driven sections and marquees
| Category | Tools |
|---|---|
| Framework | Next.js 16 (App Router) |
| UI | React 19, Tailwind CSS 4 |
| 3D | React Three Fiber, Three.js, @react-three/drei |
| Animation | GSAP + @gsap/react |
| UI primitives | Radix UI (Dialog) |
| Code quality | TypeScript, ESLint, Prettier, Husky, lint-staged |
- Node.js 18+ (LTS recommended)
- npm or pnpm
# Clone the repo
git clone https://github.com/your-username/keyboard-website.git
cd keyboard-website
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:3000.
| Command | Description |
|---|---|
npm run dev |
Start Next.js dev server |
npm run build |
Production build |
npm run start |
Run production server |
npm run lint |
Run ESLint |
npm run lint:fix |
ESLint with auto-fix |
npm run format |
Prettier format |
npm run format:check |
Prettier check only |
keyboard-website/
├── public/ # Static assets (images, fonts, 3D models, sounds)
├── src/
│ ├── app/ # Next.js App Router (layout, pages, routes)
│ ├── components/ # React components (NavBar, Footer, 3D Scene, etc.)
│ ├── constants/ # Data and config
│ ├── fonts/ # Local fonts (Roboto, Titan One)
│ └── libs/ # Utilities (e.g. GSAP setup)
├── next.config.ts
├── tailwind.config.ts
└── package.json
The project is set up for Vercel. Push to your repo and connect the project for automatic deployments.
- Live demo: https://nimbus-vapor-75.vercel.app/