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.
"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>
)
}