# Motion Director

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

- Skill: `frankxai/motion-director` (Agent Skill)
- Install (CLI): `npx skillmds@latest add frankxai/motion-director`
- Raw SKILL.md: https://api.skillmd.com/api/skills/frankxai/motion-director/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: frankxai (https://skillmd.com/u/frankxai)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/frankxai/motion-director

---


# 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