---
name: motion-design
description: Design purposeful SVG and web motion with timelines, states and reduced-motion behavior. Use for animated graphics, transitions, micro-interactions or motion export planning.
---

# Motion design

Specify what information motion communicates, state transitions, timing, and a static outcome first. Use native CSS/Web Animations API for simple sequences; choose Motion when springs, gestures or coordinated timelines justify it. Inspect the official Motion skill/docs for version-sensitive APIs. Test pause and reduced motion. Capture deterministic states for QA. `fixtures/svg-motion` is the executable starting point. Video export requires a separately verified frame pipeline; never claim it from a screenshot.