Interactive component

Mac Keyboard

Click keys or type on your physical keyboard. Spring animations, real-time key highlighting, and optional Web Audio synthesis.

With Mechanical Sound

Two-stage synthesis — a high-frequency click on actuation followed by a low-frequency thud on bottom-out, with a pitched case resonance.

65%Fn row

Output

Click keys or type to begin…

Code

"use client";
import { MacKeyboard, usePhysicalKeyboard } from "@/components/keyboard";

export function KeyboardWithSound() {
  const active = usePhysicalKeyboard();

  return (
    <MacKeyboard
      layout="mac"
      theme="auto"
      enableSound={true}
      soundType="mechanical"
      volume={0.65}
      activeKeys={active}
      showFunctionRow={true}
    />
  );
}

Without Sound

Purely visual — all animations and key-press highlighting active, Web Audio disabled. Useful for display or game-key overlays.

No audioFn row

Output

Click keys or type to begin…

Code

"use client";
import { MacKeyboard, usePhysicalKeyboard } from "@/components/keyboard";

export function KeyboardSilent() {
  const active = usePhysicalKeyboard();

  return (
    <MacKeyboard
      layout="mac"
      theme="auto"
      enableSound={false}
      activeKeys={active}
      showFunctionRow={true}
    />
  );
}

Props

Prop	Type	Default	Description
layout	"mac" \| "compact"	"mac"	Full or compact (no fn row) layout
theme	"dark" \| "light" \| "auto"	"auto"	Visual theme; auto follows the document class
enableSound	boolean	true	Enable / disable the synthesised click sounds
soundType	"mechanical" \| "soft" \| "clicky"	"mechanical"	Timbre of the key sound
volume	number 0–1	0.6	Master volume
showFunctionRow	boolean	true	Show/hide the Esc + F1–F12 row
activeKeys	string[]	[]	KeyboardEvent.code values to highlight
onKeyPress	(key: KeyDef) => void	—	Callback when a virtual key is clicked
className	string	—	Classes on the keyboard body
keyClassName	string	—	Classes applied to every keycap