Shortcut Trainer

Build a shortcut trainer that teaches at the point of use. Structure: a row representing the slow path just taken ("Menu > Search..."), and below it a panel that offers the keyboard shortcut. The timing IS the design. The offer appears immediately AFTER the user took the slow route - that is the only moment they have a reason to care. A shortcuts page nobody opens teaches nobody, and a tooltip on first launch is forgotten by the time it matters. Animate the keys pressing THEMSELVES: each keycap depresses in sequence about 200ms apart (translate down ~2px, scale 0.94, switch to the accent colour) and stays down together before releasing. A static pair of key chips does not tell you they are held at once, and the chord is the thing being taught. Style the caps as keys, not tags: an inset bottom shadow gives them a drawn edge, and the depress removes it. Then swap the panel for a success state - and change the SURFACE, not just the text (ink to a green tint), so the outcome is legible before reading a word. Make the reward MEASURED rather than congratulatory: "That is two seconds saved, every time." A generic well done teaches nothing about why to remember it. The offer must never block or undo the action already taken. Blocking the slow path to teach the fast one is punishment, not onboarding. Accessibility: the success line is aria-live="polite"; render the keys in <kbd> elements. Under prefers-reduced-motion, render the taught state directly with no keypress animation. Colors as tokens: paper card, ink offer panel, one accent for the pressed keys, semantic green for the success tint. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.