design-motion

Topics in the source

• Design Motion — Timing, Easing, Materials, Restraint
• When
• Input
• The animation gate — before writing any motion code
• Materials — transform/opacity first, other properties gated
• Durations — the 100/300/500 rule
• Easing — exponential/emphasized, no bounce
• Reduced motion — mandatory, not optional

A motion pass applied on top of an already-settled layout: the animation-decision gate (should this even animate, what's its purpose, what easing, what duration), transform/opacity-first materials, the 100/300/500ms duration scale, exponential/emphasized easing curves (bounce and elastic are banned outright), and the mandatory prefers-reduced-motion fallback shipped in the same pass. Also enforces the ban on the AI motion signature (opacity:0 + translateY(20px) + ease-in-out applied uniformly to every entrance). Runs only after the static body/component exists (design-web, design-webapp, design-ios, design-android) — never used to hide or compensate for an unfinished layout. After the static body/component exists. Motion is applied on top of a settled layout — never used to compensate for or distract from an unfinished one. Hands off to design-review next (Part 1 checks the reduced-motion fallback + transform/opacity discipline; Part 2's motion-verdict.md issues the Block/Approve). design-system.md motion personality / MOTIONINTENSITY dial (1-10). The static markup/components to animate. Run every candidate through references/animation-decision-framework.md's 4 questions, in order:

This is an excerpt. Refer to the complete source and its current requirements.