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.mdmotion personality /MOTION_INTENSITYdial (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.
Durations — the 100/300/500 rule
| Tier | Duration | Use |
|---|---|---|
| Micro | 100-150ms | button press, toggle, instant feedback |
| State | 200-300ms | menu open, tooltip, hover states |
| Layout | 300-500ms | accordion, modal, drawer |
| Entrance | 500-800ms | page load, hero reveal |
Exit animations run at ~75% of the matching enter duration. Hard rule for anything that
isn't a marketing/explanatory sequence: UI feedback stays under 300ms — a 180ms
dropdown reads as more responsive than a 400ms one
(references/animation-decision-framework.md §4).
Easing — exponential/emphasized, no bounce
Entering/exiting → ease-out. Moving/morphing on-screen (A→B) or state toggles →
ease-in-out. Hover/color change → ease. Constant motion (marquee, progress) →
linear. Never ease-in on UI — it delays the exact moment the user is watching
most closely. Use the strong custom curves in references/motion-tokens.md
(--ease-out: cubic-bezier(0.23, 1, 0.32, 1), --ease-in-out, --ease-drawer) or the
exponential/quint-out family (cubic-bezier(0.16, 1, 0.3, 1) and similar) — never the
weak built-in CSS easings. Bounce and elastic curves are banned outright — they read
as a toy interaction, not a premium one. Hard mechanical gate, zero tolerance: any
cubic-bezier with a y-control-point > 1, or the literal elastic/bounce keywords,
fails design-review/references/pre-flight-checklist.md check 9. Springs (when used —
gesture-driven/interruptible motion only) keep bounce in 0.1-0.3, biased toward 0.1
for dashboards/product register and up to 0.3 for playful/brand register.
Reduced motion — mandatory, not optional
Every animated deliverable ships a prefers-reduced-motion: reduce fallback in the same
commit — never a follow-up pass. Full patterns: references/reduced-motion.md (global
override, Framer Motion's useReducedMotion()/MotionConfig, per-animation-type
disable-vs-simplify table, WCAG 2.2 SC 2.3.3/2.3.1/2.2.2). Disable spatial movement
entirely (parallax, auto-playing carousels, zoom/scale transitions — vestibular risk);
simplify functional feedback rather than remove it (progress bars and loading spinners
stay, slowed and non-spatial; page-slide transitions become an instant swap that keeps
navigation feedback). ~35% of adults over 40 are affected by vestibular disorders — this
is not an edge case. design-review Part 1 treats a missing reduced-motion fallback as a
Critical-severity finding (audit-checklist.md Motion row) that blocks the review.
Ban — the AI motion signature
The single most common AI-generated motion tell: opacity: 0 + translateY(20px) +
ease-in-out, applied uniformly to every entrance on the page with zero variation by
element role. (No figure is attached to this one: the "~83%" belongs to the
palette/font/radius triad and to it alone — see ../design-method/SKILL.md
§Absolute bans. Never borrow it for another ban or detector.) Vary
instead: stagger timing and entrance direction/distance by section role, easing chosen
per the Q3 decision table above, duration chosen per the tier table above — never one
blanket transition rule copy-pasted down every section. design-review catches leftovers
of this at pre-flight-checklist.md check 4 (motion-claimed-motion-shown: a declared
MOTION_INTENSITY > 4 must ship actual motion code) and check 10 (layout-property
animation, warning-tier), plus the co-occurrence detectors in anti-ai-slop-audit.md.
Steps
- Gate every candidate animation through
references/animation-decision-framework.md. - Pick the duration tier (table above) and the easing token from
references/motion-tokens.md. - Choose the material —
transform/opacityby default; consultreferences/motion-physics.mdfor physical correctness andreferences/motion-performance.mdfor the GPU/perf guardrails before reaching for anything else. - Apply the category pattern:
references/entrance-patterns.md(stagger/fade/slide/scale),references/micro-interactions.md(buttons/toggles/copy actions/loading),references/page-transitions.md(route changes/drill-down/modal),references/patterns-buttons.md/references/patterns-cards.md/references/patterns-navigation.md/references/patterns-microinteractions.mdfor component-specific treatments,references/interactive-states-ref.mdfor hover/active/focus/disabled/loading state choreography.references/gsap-scroll-skeletons.mdfor pinned/scroll-driven sections (Sticky-Stack, Horizontal-Pan) — carries the same motion-claimed/motion-shown honesty rule as the ban above.references/glassmorphism-advanced-ref.mdandreferences/layered-backgrounds-ref.mdare gated-use references (blur/layering effects), never a default reach — see design-method's cluster 4 AI-slop warning (glassmorphism +rounded-2xlapplied everywhere instead of gated). - Ship the reduced-motion fallback in the same pass — not a follow-up.
- Name every effect in the handoff/spec using
references/animation-glossary.md's feel→term vocabulary ("the springy thing when a popover opens" → the exact word) — precise handoff, not vibes.
Failure Handling
- An effect needs blur/filter/backdrop-filter and visibly drops frames on target viewports → fall back to transform/opacity only, note the tradeoff in the handoff.
- A purely spatial effect (e.g. parallax) has no sane reduced form → disable entirely under the media query rather than approximate a "lite" version.
Output
- Animated component/page reusing motion tokens (durations/easings) from
references/motion-tokens.md— never hand-rolled per instance. prefers-reduced-motionfallback shipped in the same pass.- Effects named per
references/animation-glossary.mdfor handoff todesign-reviewor another agent.
Next → design-review — Part 1 checks the reduced-motion fallback and the
transform/opacity discipline mechanically; Part 2's motion-verdict.md issues the
Block/Approve on feel, physicality, and accessibility.
References
| File | Purpose |
|---|---|
references/animation-decision-framework.md |
The 4-question gate — run first, every time |
references/motion-performance.md |
GPU/perf guardrails, Framer Motion caveat, drag velocity |
references/motion-tokens.md |
Named easing curves + spring configs (the token layer) |
references/motion-physics.md |
Physical-correctness rules (never scale(0), origin, stagger, @starting-style) |
references/reduced-motion.md |
Mandatory — media query, Framer Motion hooks, WCAG 2.2, disable-vs-simplify table |
references/animation-glossary.md |
Feel → term vocabulary for specs/handoff |
references/entrance-patterns.md |
Stagger/fade/slide/scale entrance patterns |
references/micro-interactions.md |
Button/toggle/copy-action/loading micro-animations |
references/page-transitions.md |
Route changes, drill-down, modal transitions |
references/patterns-buttons.md |
Button component motion patterns |
references/patterns-cards.md |
Card motion/hover patterns |
references/patterns-navigation.md |
Navigation/responsive-navbar motion |
references/patterns-microinteractions.md |
Broader micro-interaction/transition patterns |
references/interactive-states-ref.md |
Hover/active/focus/disabled/loading state choreography |
references/motion-principles.md |
Motion hierarchy, duration scale, easing — general principles |
references/motion-patterns.md |
Framer Motion pattern library, timing guidelines |
references/gsap-scroll-skeletons.md |
Scroll-driven/pinned skeletons + motion-claimed/motion-shown rule |
references/glassmorphism-advanced-ref.md |
Gated-use glass effects (blur/layering) — never default |
references/layered-backgrounds-ref.md |
Gated-use gradient orbs/blur layers/noise textures |