Motion Review
Review existing or changed animation code against ten motion standards (justified, frequency-appropriate, responsive easing, sub-300ms UI, correct origin, interruptible, GPU-only, accessible,.
Distilled from Emil Kowalski's
review-animationsskill (MIT).
Core Rule
Strict reviewer, specific fixes. Every animation in scope is measured against
the ten standards. Each finding is a row with the exact before value, the exact
after value, and why, citing file:line. When unsure whether something feels
right, the strongest move is often to delete it.
Values: agent_docs/motion.md.
The ten standards
- Justified: it has a purpose (spatial, state, feedback, explanation, preventing a jarring change).
- Frequency-appropriate: none for keyboard and 100+/day actions.
- Responsive easing: ease-out or a strong custom curve; ease-in on UI is a block.
- Sub-300ms UI: slower needs a stated reason.
- Origin and physics: popovers scale from the trigger (modals stay centered); enter from
scale(0.95)or so, neverscale(0). - Interruptible: transitions or springs for rapid or gesture motion; not keyframes.
- GPU-only: transform and opacity; no layout properties.
- Accessible: reduced motion honoured (gentler, not zero); hover gated by
(hover: hover) and (pointer: fine). - Asymmetric: deliberate phases are slow, system responses snap.
- Cohesive: matches
DESIGN_MAP.md → Characterand the rest of the product.
Flag on sight
transition: all · scale(0) · ease-in on UI · animation on a keyboard or 100+/day action · UI duration over 300ms with no reason · center origin on an anchored popover · keyframes on toasts or toggles · animated layout properties · Framer x/y/scale shorthands under load · a parent CSS variable driving child transforms · missing reduced motion · ungated :hover motion · symmetric hold or press timing · everything entering at once.
Fix preference (earlier beats later)
- Delete → 2. Reduce → 3. Fix easing → 4. Fix origin/physics → 5. Make interruptible → 6. Move to GPU → 7. Asymmetric timing → 8. Polish (stagger, blur-masked crossfade,
@starting-style) → 9. Accessibility and cohesion.
Output (both parts required)
Part 1: findings
| Before | After | Why |
|---|---|---|
transition: all 300ms (Card.tsx:12) | transition: transform 200ms cubic-bezier(0.23,1,0.32,1) | all animates unintended properties off the GPU |
Part 2: verdict, grouped by tier, highest first; omit empty tiers:
- Feel-breaking regressions
- Missed simplifications
- Performance
- Interruptibility and timing
- Origin, physicality and cohesion
- Accessibility
End with Block (any feel-breaking regression, animation on a keyboard/high-frequency action, scale(0) or ease-in on UI, or a non-GPU animation with an easy fix) or Approve.
Never
- Approximate values. Take curves and durations from
agent_docs/motion.md. - Approve motion you couldn't observe without saying it was reviewed from code only.
Interface Check
Check UI code against the interface guidelines (keyboard, targets, forms, state and URL, feedback, touch, layout, content and accessibility, performance, dark mode, hydration, design details) and.
Stress Ui
Break a component with worst-case but realistic data (long names, unbreakable emails, CJK/RTL, 0/1/1,000 items, huge numbers, missing fields), wire a dev-only data toggle, check at 320px, 200% zoom,.