Mech Keyboard

Press a few keys. It is a three.js scene drawn as an isometric illustration: a milled case around a recessed plate, a volume knob, and 82 keycaps fading from dusty blue at the back to off-white at the front, shaded in three flat tone bands and outlined in ink. Legends are printed in the same ink. Your keyboard drives the keys, and the recorder above spells out the chord, ready for a "create a shortcut" step in onboarding.

Installation

pnpm dlx shadcn@latest add @23rd/mech-keyboard

Or from the public GitHub registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/mech-keyboard

Usage

Give the parent a size; the keyboard fits itself inside it.

"use client"

import { MechKeyboard } from "@/components/ui/mech-keyboard"

export function ShortcutStep() {
  return (
    <div className="h-[28rem] w-full overflow-hidden rounded-xl border bg-background">
      <MechKeyboard
        onShortcut={(shortcut) => console.log(shortcut.label)}
      />
    </div>
  )
}

onShortcut fires when every key of a chord is released. It gets codes (KeyboardEvent.codes, modifiers first), keys (one legend per key), and label ("⌘⇧K" on Mac, "Ctrl+Shift+K" elsewhere).

Keys listen on the window, but typing in an input, textarea, or contenteditable elsewhere on the page is ignored. While the keyboard itself has focus, the browser's own handling of those keys is prevented (except Tab), so it can record combos like ⌘S. Clicking a modifier latches it; clicking another key then fires the chord.

Needs WebGL; without it the canvas stays empty and the recorder still works. The pose is fixed at true isometric. Move it, drop the color, or pulse the keys you want pressed:

<MechKeyboard x={-40} y={20} scale={0.9} />
<MechKeyboard monochrome />
<MechKeyboard highlight={["MetaLeft", "KeyK"]} recorder={false} />

monochrome swaps the blue caps for white and grey, leaving a pure ink drawing. The recorder draws each key of the chord as a small keycap in the same style; held keys sink into their skirts. The knob turns under the mouse wheel and with the volume keys, and clicking it records Mute.

Props