Scenario guides

Design motion from real product questions

Save, submit, and publish feedback

Design save, submit, and publish feedback so every action has a clear start, progress, and result.

Long read · 3 diagrams · checklist and codeRead full guide

Keep context through cards, lists, and filters

Keep cards, lists, and filters legible as content changes, so people can follow what moved, stayed, or left.

Long read · 3 diagrams · checklist and codeRead full guide

Diagnose CSS motion jank

Find CSS motion jank by checking frame work, layout cost, paint, and the actual duration of the interaction.

Long read · 3 diagrams · checklist and codeRead full guide

Choose spring or ease-out by meaning

Choose spring or ease-out from the interaction’s meaning, interruption pattern, and need for a settled ending.

Long read · 3 diagrams · checklist and codeRead full guide

Reduced motion without losing meaning

Offer low-motion treatments for travel, scale, and loops while keeping hierarchy and action outcomes clear.

Long read · 3 diagrams · checklist and codeRead full guide

Validation, deletion, and permission boundaries

Give validation, deletion, and permission changes the right feedback so risk, next steps, and recovery stay clear.

Long read · 3 diagrams · checklist and codeRead full guide

Turn a vague motion brief into a spec

Turn a vague motion brief into a buildable spec with trigger, object, states, timing, and reduced-motion rules.

Long read · 3 diagrams · checklist and codeRead full guide

Choose a component or a motion primitive

Choose a component or motion primitive from interaction completeness, existing structure, and adaptation scope.

Long read · 3 diagrams · checklist and codeRead full guide