Keystroke

$ pnpm dlx shadcn@latest add @remocn/keystroke

Usage

Keystroke is the keyboard counterpart of simulated-cursor. For each shortcut, physical keycaps rise in near the bottom of the frame and press in real order. The modifiers go down first and stay down while the letter taps, then come up after it. Each keytop sinks into its base, so the side wall shortens and the contact shadow tightens. On release it springs back with a small overshoot, and the legend of a key that is down turns the accent color. The caps leave together after an idle hold. When the next shortcut arrives, the previous one slides back and dims before it leaves.

import { Backdrop } from "@/components/remocn/backdrop";
import { Keystroke } from "@/components/remocn/keystroke";
 
export const ShortcutOverlay = () => (
  <Backdrop
    fill={{ type: "color", value: "#e9e9e5" }}
    padding={0}
    radius={0}
    shadow=""
  >
    <Keystroke />
  </Backdrop>
);

The component paints no background, so it composites over any scene. theme="light" draws off-white caps on a light-gray wall, and theme="dark" draws graphite caps. platform="mac" draws the glyphs ⌘ ⌥ ⇧ ⌃ ↩ ⌫ ⎋ ⇥, and platform="windows" writes Ctrl, Alt, Shift and Enter on wider caps. x and y place the center of the row as fractions of the frame. size is the keycap height in reference pixels at 720p and scales with the composition height, so the caps look the same at 1080p and 4K. In a vertical video, pass a smaller size.

Your own shortcuts

Each step is { at, keys, hold }. at is the frame the shortcut fires: the frame its last key bottoms out. It uses the same Sequence-local frames as the at of a remocn-ui step, so a keystroke and the UI it opens can share one number. Everything before the click is scheduled backward from at.

import { Backdrop } from "@/components/remocn/backdrop";
import { CommandMenu } from "@/components/remocn/command-menu";
import { Keystroke } from "@/components/remocn/keystroke";
import { useCurrentState } from "@/lib/remocn-ui";
 
const OPEN = 24;
const CLOSE = 96;
 
export const PaletteDemo = () => {
  const state = useCurrentState(
    [
      { at: OPEN, state: "opened" },
      { at: CLOSE, state: "closed" },
    ],
    "closed",
  );
 
  return (
    <Backdrop
      fill={{ type: "color", value: "#f4f4f2" }}
      padding={0}
      radius={0}
      shadow=""
    >
      <CommandMenu state={state} />
      <Keystroke
        steps={[
          { at: OPEN, keys: "mod+k" },
          { at: CLOSE, keys: "esc" },
        ]}
      />
    </Backdrop>
  );
};

keys is a combo joined with + ("mod+k", "shift+mod+p", "enter") or a sequence of combos separated by spaces ("g i" presses G, then I). A sequence fires on its last key, and a subtle "then" joins its chords. mod is ⌘ on mac and Ctrl on windows. The other modifiers are shift, alt/option, ctrl/control, cmd/meta (Win on windows) and fn. They are always drawn and pressed in the platform's standard order. Named keys include enter, esc, tab, space, backspace, delete, the arrows (up, down, left, right), f1 to f24, and plus for a plus key. Any other single character is drawn as its uppercase letter.

Timing

At 30 fps with speed={1} and the default steps, mod+k on 20, g i on 78 and shift+mod+p on 114:

Each key takes 3 frames to go down. Keys in a combo start 3 frames apart and come up 3 frames apart, last down first up. The chord stays down for its hold (8 frames by default). The release lands exactly on rest 10 frames later. The caps start rising before at: 10 frames for a single key, 13 for a two-key combo, 16 for three, and 30 for g i. getKeystrokeLeadIn(keys, hold) returns that lead-in, so leave at least that much before the first at in a Sequence. After the last key comes up, a group waits linger frames (30 by default), then leaves over 8 frames. A group pushed back by a newer one leaves sooner, 18 frames after the push. If its keys are still down at the push, the 18 frames count from its last key-up instead, so its release still plays. At most two groups hold the screen: a third arrival sends the oldest off at once.

keystrokeLength is 166, the frame the default content has left. getKeystrokeDuration({ steps, linger, speed, fps }) returns the frames your own steps need, plus a 14-frame tail. at, hold and linger are frames of your composition, exactly like remocn-ui at. The press and release motion keeps the same timing in seconds at any frame rate.

KeystrokeStep