Scenario guides

Design motion from real product questions

Eight illustrated, bilingual field guides connect product state, motion primitives, and copy-ready Product Moments into a practical path.

Scenario guide 01

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
Scenario guide 02

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
Scenario guide 03

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
Scenario guide 04

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
Scenario guide 05

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
Scenario guide 06

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
Scenario guide 07

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
Scenario guide 08

Choose a Pack or a motion primitive

Choose a Pack or a motion primitive by scenario completeness and customization depth, balancing speed with design control.

Long read · 3 diagrams · checklist and codeRead full guide