KeySense is an interactive keyboard gallery for exploring how popular keyboards look, feel, compare, and sound. You can browse curated boards, press keys on model-specific layouts, compare two keyboards side by side, and run a typing test with switch-style sound feedback.
Live site: https://key-sense.netlify.app/
GitHub: https://github.com/vishvavariya/keysense
- Interactive keyboard stage with physical key presses and clickable keys.
- Per-model visuals for Apple, Logitech, and Keychron keyboards.
- Switch sound profiles for linear, tactile, and clicky-style feedback.
- Keyboard comparison page with side-by-side specs and sound playback.
- Typing test with WPM, accuracy, elapsed time, and live keyboard audio.
- Responsive dark UI built around compact product-focused workflows.
- Custom KeySense favicon, app icons, and installable web app manifest.
- Next.js 16 App Router
- React 19
- TypeScript
- Tailwind CSS 4
- Framer Motion
- Three.js and React Three Fiber for richer model experiments
- Native Web Audio for keyboard sound playback
- Node.js 20.9.0 or newer
- npm
The project includes an .nvmrc so nvm use selects the expected Node version.
npm install
npm run devOpen http://localhost:3000 to use the app.
npm run dev # Start the local Next.js development server
npm run build # Create a production build
npm run start # Run the production build
npm run lint # Run ESLint- MIT licensed.
- GitHub Actions runs lint and production build checks on pushes and pull requests.
- No environment variables are required for local development or deployment.
- Security reporting and contribution guidelines are documented in
SECURITY.mdandCONTRIBUTING.md.
/- Browse the keyboard catalog and try the featured keyboard./keyboard/[id]- Inspect one keyboard, change sound profiles, and view specs./compare- Compare two keyboards visually and by specs./typing-test- Measure WPM and accuracy while hearing the selected keyboard.
- Apple Magic Keyboard
- Apple MacBook Pro 16" Keyboard
- Logitech MX Keys
- Logitech G915 TKL
- Logitech MX Mechanical
- Logitech K380
- Keychron Q1 Pro
- Keychron K2
app/ Next.js routes, layout, favicon, app icons, manifest
components/providers/ App shell, sound provider, and shared providers
components/ui/ Header, logo, cards, filters, and controls
data/keyboards.ts Keyboard metadata used by lists, filters, and specs
hooks/ Key press, typing test, and sound engine hooks
keyboards/ Model-specific layouts, renderers, and visual profiles
lib/types.ts Shared TypeScript domain types
public/ Images, generated app icons, logo source, and sounds
- Add the keyboard metadata in
data/keyboards.ts. - Create or reuse a visual model in
keyboards/<brand>/. - Register the model in
keyboards/_base/registry.ts. - Add sound files under
public/sounds/<keyboard-id>/if the keyboard needs custom audio. - Add product imagery or generated assets under
public/keyboards/when a card/detail view needs it. - Test
/,/keyboard/<id>,/compare, and/typing-testafter registering the model.
public/keysense-mark.svgis the editable source logo mark.app/favicon.ico,app/icon.png, andapp/apple-icon.pngare the browser/app icon assets recognized by Next.js App Router metadata conventions.public/icon-192.pngandpublic/icon-512.pngare referenced byapp/manifest.ts.
Regenerate icon PNG/ICO files from public/keysense-mark.svg after changing the mark.
- This project uses Next.js 16. Before changing framework APIs, metadata conventions, or routing behavior, read the relevant local docs in
node_modules/next/dist/docs/. - Browser audio may require a user gesture before sound playback starts.
- No environment variables are required right now. If new secrets are introduced, document them in an
.env.examplefile and keep real.env*files out of git.
Build with npm run build, then deploy to any platform that supports Next.js. The live deployment currently runs on Netlify.