Mech Keyboard

Component 1

About

A 75% mechanical keyboard drawn as an isometric illustration in three.js, with ink outlines and a volume knob. Keys press along with your real keyboard, and a recorder spells out the shortcut for onboarding flows.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Mech Keyboard to your project and fits it to your theme.

Code

How Mech Keyboard is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

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

const settings = {
  scale: 1,
  monochrome: false,
  recorder: true,
  hint: false,
  interactive: true,
  placeholder: "Press a shortcut",
}

// Keys pulsed by the `hint` setting: Cmd/Win + K.
const HINT = ["MetaLeft", "KeyK"]

export default function MechKeyboardDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }

  return (
    <div className="flex min-h-[520px] w-full items-center justify-center bg-background p-4">
      <div className="relative h-[520px] w-full overflow-hidden rounded-xl bg-background">
        <MechKeyboard
          scale={s.scale}
          monochrome={s.monochrome}
          recorder={s.recorder}
          highlight={s.hint ? HINT : undefined}
          interactive={s.interactive}
          placeholder={s.placeholder}
        />
      </div>
    </div>
  )
}