# Keycap Press
URL: https://remocn.dev/docs/ui-blocks/keycap-press

Keycaps rise in 3D and press as a shortcut chord, then a line of text writes in below.

- Install: `npx shadcn@latest add @remocn/keycap-press`
- Vibe: playful
- Natural length: 84f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/keycap-press
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { KeycapPress } from "@/components/remocn/keycap-press";

const KeycapPressScene = () => (
  <KeycapPress
    keys={[{ label: "⌘", sub: "command", width: 1.25 }, { label: "K" }]}
    label="Everything, one shortcut away"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="KeycapPress"
    component={KeycapPressScene}
    durationInFrames={135}
    fps={30}
    width={1280}
    height={720}
  />
);
```

Keycaps rise into a tilted 3D view, press one after another as a chord with a ripple, then lift while the `label` writes in below. Pass your own `keys` as strings or objects with a legend, a sub label and a width. `material` sets the keycap finish and `theme` the stage; the symbols for command, option and shift are drawn as icons.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `keys` | `(string \| { label: string; sub?: string; width?: number })[]` | `DEFAULT_KEYS` | Keys in the chord. Strings or objects with a label, sub caption and width. |
| `label` | `string` | `"Everything, one shortcut away"` | Line of text written in under the keys. |
| `material` | `"dark" \| "light"` | `"dark"` | Keycap finish, dark or light. |
| `theme` | `"dark" \| "light"` | — | Stage look, dark or light. Defaults to the material. |
| `accent` | `string` | `"#3B5BFD"` | Color of the press ripple. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A shortcut or command-palette feature, such as a two-key chord that opens everything.
- A launch beat that needs a tactile, physical object rather than a flat UI.
- Teaching a keyboard-first product where the keys themselves are the hero.

## Don't use when
- You only need typed key labels appearing as text — use `keystroke`.
- The shortcut opens a palette you want to show in full — use `command-menu`.
- A button being clicked by a pointer is the story — use `button`.