Mechanikey

A 3D-first storefront concept for mechanical keyboards — configure a board, spin it in 3D, and check out, all with buttery smooth scroll and real-time WebGL.

🔗 Live → mechanikey.vercel.app

Highlights

• Real-time 3D product — Model / DualModel render the keyboard in-browser with React Three Fiber; KeycapText3D renders custom text extruded onto keycaps
• Interactive hardware picker — HardwareTabs swap switches/materials live on the model
• Commerce surface — CartDrawer add-to-cart flow
• Motion — Lenis smooth scroll (LenisProvider), GSAP, Lottie; animated cable Noodles
• Content — a small blog (App Router)

Stack

• Next.js (App Router) + TypeScript
• React Three Fiber + @react-three/drei (Three.js)
• GSAP, Lenis, Lottie
• Radix UI primitives, Tailwind

Run locally

npm install
npm run dev   # http://localhost:3000