---
name: motion-director
description: Use when designing motion concepts, animation systems, choreography, timing, easing, reduced-motion behavior, or deciding which motion stack to use for web UI, video, GIF, Rive, Lottie, GSAP, Motion, Remotion, or Three.js work.
---

# Motion Director

## Workflow

1. Identify the output target: product UI, landing page, social video, GIF, design prototype, or embedded animation asset.
2. Define the job of motion: guide attention, explain state, create delight, teach a concept, or express brand.
3. Choose the stack:
   - Motion for React UI state and layout transitions.
   - GSAP for timelines, scroll, SVG, text, and high-control choreography.
   - Rive for interactive state-machine animation.
   - Lottie for portable vector loops.
   - Remotion for rendered video/GIF.
   - Three.js for spatial/3D scenes.
4. Specify timing tokens, easing, stagger rules, and reduced-motion behavior.
5. Ask the implementation agent to patch code.
6. Capture output and score it with the motion quality rubric.

## Output Shape

Return:

- Motion goal
- Recommended stack
- Choreography
- Timing/easing tokens
- Reduced-motion path
- Implementation notes
- QA checklist