Keycap Press

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

Installation

$ pnpm dlx 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.

Props8

Prop	Type	Default
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	number1 Playback speed multiplier for the whole timeline.

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