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