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 of 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

Reduced motion drops the translate and keeps the fade, so the UI still confirms the action.

.panel {
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: opacity 120ms linear;
    transform: none;
  }
}

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. A blanket rule that zeroes every animation-duration and transition-duration is the anti-pattern, because it strips the feedback along with the motion.

Learn more

Full explanation

Critique drill: find five improvements

Critique drill: find five improvementsthe skill a portfolio review is likely to probe

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 lands in ~80ms instead of snapping. That is a micro-settle, so it runs shorter than the usual 150 to 250ms.
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

Test yourself on 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