design-motion

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.

Design Motion — Timing, Easing, Materials, Restraint

When

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).

Input

• design-system.md motion personality / MOTION_INTENSITY dial (1-10).
• The static markup/components to animate.

The animation gate — before writing any motion code

Run every candidate through references/animation-decision-framework.md's 4 questions, in order: (1) should this animate at all — frequency decides, never animate keyboard-initiated or 100+/day actions; (2) what's the one-sentence purpose (spatial consistency / state indication / explanation / feedback / preventing jarring change); (3) what easing; (4) what duration. Most "let's animate this" ideas should die at question 1 — that is the point, not a formality to skip.

Materials — transform/opacity first, other properties gated

Default to transform and opacity — they skip layout and paint and run on the GPU. Animating width/height/top/left/margin/padding triggers layout+paint+composite and drops frames; see references/motion-performance.md for the Framer Motion shorthand caveat (x/y/scale shorthands are NOT hardware-accelerated, use the full transform string), the CSS-var recalc trap (never drive child transforms via a custom property on the parent), CSS transitions vs. keyframes for interruptible UI, and velocity-based drag dismissal (~0.11 threshold, not distance alone). Other atmospheric materials — blur, backdrop-filter, clip-path, shadow bloom, masks — are allowed when they demonstrably read as premium and stay smooth on the target viewports, verified in-browser, never a default reach; keep expensive effects bounded to small/isolated areas. references/motion-physics.md covers physical-correctness rules for whichever material is used: never scale(0), origin-aware popovers, asymmetric enter/exit timing (exit ~75% of enter duration), staggered lists (cap total stagger time), blur masking, @starting-style.