1 min lesson

Timing, choreography & reduced motion

Tell someone how to act on this idea: "Keep durations short: 150 to 250ms for most UI motion."

Timing, choreography & reduced motionstagger with intent and honor the preference

When several elements enter at once, a small stagger - 20 to 40ms between items - reads as orchestrated instead of chaotic. Keep durations short: 150 to 250ms for most UI motion. Long animations feel slow on the tenth use even if they delight on the first.

Learn more

Full explanation

Always provide a reduced-motion path

Always provide a reduced-motion path. It is an accessibility requirement, not a nicety.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* Better: keep opacity fades, drop large translates/parallax for
   users who get motion sick. Reduced motion != no feedback. */

Watch out

prefers-reduced-motion: reduce does not mean remove all feedback. It means cut vestibular triggers - big translations, parallax, spin. Keep opacity fades and instant state changes so the UI still confirms the user’s action.

Learn more

Full explanation

Critique drill: find five improvements

Critique drill: find five improvementsthe skill the portfolio round tests

Take a real Cursor interaction - say, accepting an inline completion - and force yourself to list five concrete polish improvements. Not vibes, specifics you could ship.

Tune the ghost-text fade so accepted text settles in ~80ms instead of snapping.
Add a focus-visible ring to the accept affordance so keyboard users see the target.
Stagger multi-line diff reveals by ~25ms per line so the change reads top to bottom.
Give the reject path the same motion weight as accept, so dismissing never feels punished.
Show a calm pending state while the model streams, not a spinner that implies a hang.

Say it like this

“The interaction worked, but it snapped. I added an 80ms ease-out on the accepted text and a 25ms stagger across diff lines so the change reads in order. Small numbers, but it’s the difference between functional and considered.”

Learn more

Optional practice

Practice: Timing, choreography & reduced motion

QA teammate sets prefers-reduced-motion: reduce to strip every animation and transition from the app. What’s the problem and what’s the better approach?

Timing, choreography & reduced motion

Step 1 of 3