Shortcut Teaching Moment
A card rises with the shortcut and presses the keys itself, and the control it operates answers a beat later.
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 { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Shortcut Teaching Moment
*
* After the same thing has been done the slow way a few times, a card
* rises with the shortcut and presses the keys itself — the caps sinkAbout this pattern
The tip that appears once someone has done the same thing the slow way a few times. A small card rises over the surface, and rather than describing the shortcut it performs it: each cap sinks two pixels onto its own fixed base — the way a real key loses its lip — and a moment after the last one lands, the field the shortcut operates lights up. Demonstrating the result is what makes the tip stick; a diagram of two keys does not. The caps are pure transform with no shadow animation and nothing scales, because a legend that grows while being pressed reads as a cartoon. The whole thing repeats once, then stops.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
Repeating a mouse action surfaces the keyboard equivalent in a small card.
Related patterns
- Keyboard Shortcut FlashA key cap depresses briefly to teach the shortcut that just fired.
- First Action NudgeAfter a pause with nothing pressed, a slow halo starts breathing out of the one button worth pressing.
- Import Data ConnectA line draws itself between two service marks, records run along it, and the destination takes a check when the import lands.