Keyboard Shortcut Flash
A key cap depresses briefly to teach the shortcut that just fired.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Keyboard Shortcut Flash
*
* The action already happened — someone reached for the row menu. A
* strip surfaces in the status bar, the caps sink once in chord order,About this pattern
The acknowledgement for something already finished. Someone reached for the row menu, the action landed, and a strip surfaces in the status bar naming the chord that would have done it in one gesture. The caps sink 2px onto their own fixed base in chord order — the held cap goes down first and comes up last, the letter taps inside that hold — so the strip performs the combination instead of listing it. Then it retires on its own clock, with no button to press and nothing asking to be acknowledged. That is the whole design constraint: this fires after a task the person completed successfully, so it has to be ignorable. Nothing scales, nothing repeats, and the press tint is a separate layer fading over the cap rather than an interpolated color.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
Doing something through the interface surfaces the equivalent key combination in passing chrome.
Related patterns
- Shortcut Teaching MomentA card rises with the shortcut and presses the keys itself, and the control it operates answers a beat later.
- Hover Tooltip FadeA hint fades up after a deliberate pause, so crossing a row of icons never sets off a flicker.
- Changes Saved PillA pill drifts up from the toolbar to confirm an autosave, then dissolves.