Shortcut Keycaps Overlay — effect skill for cursors & clicks

For AI agents: find the right skill in one call — curl -s "https://varg.ai/how-to/api/search?q=<what the person wants>" returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the how-to page.

Physical-looking keycaps rise at the bottom of the frame and press in the real order when a shortcut is used.

What it does

Built on Keystroke by Kapish Dima (remocn), MIT. The write-up and recipes below are varg's.

Rounded keycaps (⌘, ⇧, K) appear bottom-center, modifiers stay held while the letter taps, then the row fades.

When: Keyboard-driven tools and tutorials where the shortcut is the lesson.

Watch out: Do not show every keystroke while typing text; only shortcuts and modifier combos.

Timing: Keys rise 0.2 s with 40 ms stagger, press 0.08 s, hold 0.8–1.2 s, fade 0.2 s.

Also called: keystroke overlay, show shortcuts, keycaps

In HyperFrames

npx hyperframes add badge-pop

Build keycaps as <kbd> elements; tl.from(".kbd",{y:30,opacity:0,stagger:0.04,duration:0.2}) then press the letter with scale:0.92.

In Remotion

// npx shadcn@latest add @remocn/keystroke
<Keystroke keys={['⌘','K']} />

In CapCut

Text → Text templates → search "keyboard"/"key"; or record with KeyCastr/Screen Studio "Show shortcuts" on.

Ready-made components

Where this comes from

Use when

Not for

Install

More cursors & clicks skills

Run the generation on varg

varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.