# Keystroke: Keyboard Shortcut Overlay

3D keycaps rise in for each shortcut, press in real order with modifiers held, spring back and leave. Use this video template in Subclip or copy its code for Claude.

Canonical URL: https://www.subclip.app/motion-graphics-templates/remotion/keystroke

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-keystroke.mp4?v=90da95af14

Physical keycaps near the bottom of the frame that press each shortcut in the right order, light up while down and spring back after.

- Framework: Remotion
- Category: Effects
- Duration: 6 s
- Aspect ratio: 16:9 landscape
- Code: Get the code (free sign-in): https://www.subclip.app/motion-graphics-templates/remotion/keystroke

Off-white keycaps rise in near the bottom of a light gray frame and press ⌘K: the ⌘ key goes down first, K taps while it is held, and the legends turn blue while the keys are down before they spring back. Next comes G then I as a sequence, and finally ⇧⌘P, with the older shortcut sliding back and dimming as each new one arrives. The caps leave after a short hold. It plays in about six seconds.

You can switch between Mac glyphs and Windows key names, pick a light or dark theme, and change the accent color, keycap size, how long the caps stay after the last key, and the position of the row, plus playback speed and background. Use it in software tutorials, keyboard-first product demos, productivity tips and screen recordings of developer tools.

## Use it for

- Software tutorials
- Keyboard-first product demos
- Productivity tips
- Developer tool screen recordings

## What you can change

- `speed`: Playback speed (Number)
- `platform`: Platform (Text)
- `theme`: Theme (Text)
- `accent`: Accent color (Color)
- `size`: Keycap size (Number)
- `linger`: Hold after last key (frames) (Number)
- `x`: Horizontal position (Number)
- `y`: Vertical position (Number)
- `stageBackground`: Background around the scene (Color)

## How to use this template

1. Download Subclip for Mac or Windows. Every template on this page comes pre-installed.
2. Open the Templates panel, pick Keystroke and drop it on your timeline.
3. Change the text, colors and timing in the layer settings, or ask the AI agent to edit it for you.
4. Export your video, or download the code to use the template in your own project.

Built on Keystroke from remocn: https://remocn.dev