Keycaps

Sculpted mechanical keycaps that mirror your real keyboard — with a synthesized thock.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Animated · Full motion: idle animation, physics and effects. animated (default)

Chunky keycaps with real travel and a shrinking side wall. They listen to the physical keyboard: press K and the K cap goes down. Optional sound is synthesized live with Web Audio (no audio files).

Installation

$ npx shadcn@latest add https://guetix.com/r/keycaps.json

Uses the shadcn CLI. It creates components/guetix/keycaps.tsx and installs nothing else.

Usage

example.tsx

"use client";

import { useState } from "react";
import Keycaps, { type Keycap } from "@/components/guetix/keycaps";

const KEYS: Keycap[] = [
  { label: "esc", match: ["Escape"], variant: "dark" },
  { label: "⌘", match: ["Meta", "Control"], variant: "dark", width: 1.5, ariaLabel: "Command" },
  { label: "K", match: ["k"], variant: "accent" },
  { label: "space", match: [" "], width: 2.5 },
  { label: "↵", match: ["Enter"], variant: "dark", width: 1.5, ariaLabel: "Enter" },
];

export default function KeycapsDemo({ variant = "animated" }: { variant?: string }) {
  const [last, setLast] = useState("Try ⌘ / Ctrl + K on your keyboard");
  return (
    <div className="flex flex-col items-center gap-5">
      <Keycaps animated={variant !== "regular"} keys={KEYS} sound accent="#4ade80" onPress={(i) => setLast(`Pressed ${KEYS[i].ariaLabel ?? String(KEYS[i].label)}`)} />
      <p className="font-mono text-xs text-white/50" aria-live="polite">
        {last}
      </p>
    </div>
  );
}

Shortcut hints (⌘K)OnboardingGame-like CTAsDeveloper-tool landing pages

Under the hood

The details that make it feel right, and that a one-line prompt usually misses:

01The 'thock' is filtered white noise with an exponential decay through a band-pass, so there are no assets to ship.
02Pointer capture + key-repeat filtering + blur reset prevent stuck keys.
03Keys can be sized in real keyboard units, like a 2.5u spacebar.

Props

Prop	Type	Default	Description
keys	Keycap[]	—	`{ label, match?, width?, variant?, ariaLabel? }`
listen	boolean	true	Mirror the physical keyboard.
sound	boolean	false	Synthesized switch sound.
accent	string	"#4ade80"	Accent cap color.
onPress	(index: number) => void	—	Fired on press.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

Real buttons with `aria-pressed`; Enter/Space press them.
Icon legends take an `ariaLabel`.

Keycaps

Sculpted mechanical keycaps that mirror your real keyboard — with a synthesized thock.

Zero dependencies
React + Tailwind
Accessible
Reduced-motion aware

Open in v0

Animated · Full motion: idle animation, physics and effects. animated (default)

Chunky keycaps with real travel and a shrinking side wall. They listen to the physical keyboard: press K and the K cap goes down. Optional sound is synthesized live with Web Audio (no audio files).

Installation

$ npx shadcn@latest add https://guetix.com/r/keycaps.json

Uses the shadcn CLI. It creates components/guetix/keycaps.tsx and installs nothing else.

Usage

example.tsx

"use client";

import { useState } from "react";
import Keycaps, { type Keycap } from "@/components/guetix/keycaps";

const KEYS: Keycap[] = [
  { label: "esc", match: ["Escape"], variant: "dark" },
  { label: "⌘", match: ["Meta", "Control"], variant: "dark", width: 1.5, ariaLabel: "Command" },
  { label: "K", match: ["k"], variant: "accent" },
  { label: "space", match: [" "], width: 2.5 },
  { label: "↵", match: ["Enter"], variant: "dark", width: 1.5, ariaLabel: "Enter" },
];

export default function KeycapsDemo({ variant = "animated" }: { variant?: string }) {
  const [last, setLast] = useState("Try ⌘ / Ctrl + K on your keyboard");
  return (
    <div className="flex flex-col items-center gap-5">
      <Keycaps animated={variant !== "regular"} keys={KEYS} sound accent="#4ade80" onPress={(i) => setLast(`Pressed ${KEYS[i].ariaLabel ?? String(KEYS[i].label)}`)} />
      <p className="font-mono text-xs text-white/50" aria-live="polite">
        {last}
      </p>
    </div>
  );
}

Shortcut hints (⌘K)OnboardingGame-like CTAsDeveloper-tool landing pages

Under the hood

The details that make it feel right, and that a one-line prompt usually misses:

01The 'thock' is filtered white noise with an exponential decay through a band-pass, so there are no assets to ship.
02Pointer capture + key-repeat filtering + blur reset prevent stuck keys.
03Keys can be sized in real keyboard units, like a 2.5u spacebar.

Props

Prop	Type	Default	Description
keys	Keycap[]	—	`{ label, match?, width?, variant?, ariaLabel? }`
listen	boolean	true	Mirror the physical keyboard.
sound	boolean	false	Synthesized switch sound.
accent	string	"#4ade80"	Accent cap color.
onPress	(index: number) => void	—	Fired on press.
animated	boolean	true	false = the calm “Regular” version (no idle or ambient motion).

Accessibility

Real buttons with `aria-pressed`; Enter/Space press them.
Icon legends take an `ariaLabel`.

Keycaps

Preview

Keycaps

Preview