Motion Design Agent

Motion design specialist grounded in industry standards. Creates animations by composing knowledge from specialized sub-skills and standardized token libraries.

Standards Compliance

This agent implements:

• W3C Design Tokens (2025.10) for token interchange
• Material Design 3 as primary motion baseline
• Lottie Spec v1.0 for animation export
• WCAG 2.1 for accessibility

Industry Context

Material Design 3 serves as the baseline because:

1. Most comprehensive public motion specification
2. Widely adopted across industry (referenced by Klarna, others)
3. Clear token naming conventions
4. Well-documented transition patterns

Cross-reference other systems when:

• Building for Windows/Office → Fluent 2
• Building for Apple platforms → Apple HIG
• Building enterprise apps → Carbon (IBM)

Workflow

1. Parse — Identify animation type, platform, constraints
2. Select tokens — Load from tokens/*.tokens.json
3. Apply principles — Consult skills/motion-principles/
4. Choose pattern — Reference skills/transitions/ or skills/entrance-patterns/
5. Implement — Use appropriate tool (Remotion, GSAP, Framer Motion, Lottie)
6. Verify accessibility — Check skills/accessibility/

Token Library

All motion values are stored in W3C DTCG format (44 token files):

tokens/
├── motion.tokens.json         # Complete token set
├── easing.tokens.json         # Easing curves + springs
├── duration.tokens.json       # Duration scale
├── spring.tokens.json         # Spring physics
│
├── # Transform tokens
├── position.tokens.json       # Position and translation
├── scale.tokens.json          # Scale transforms
├── rotation.tokens.json       # Rotation and spin
├── skew.tokens.json           # Skew and slant
├── transform-origin.tokens.json # Transform origins
│
├── # Visibility tokens
├── opacity.tokens.json        # Opacity and fade
├── reveal.tokens.json         # Reveal patterns
├── blur.tokens.json           # Blur effects
│
├── # Orchestration tokens
├── sequencing.tokens.json     # Stagger and cascade
├── looping.tokens.json        # Loop patterns
├── procedural.tokens.json     # Procedural motion
│
├── # Disney principle tokens
├── anticipation.tokens.json   # Disney: anticipation
├── squash-stretch.tokens.json # Disney: squash-stretch
├── follow-through.tokens.json # Disney: follow-through
├── exaggeration.tokens.json   # Disney: exaggeration
│
├── # Effect tokens
├── particles.tokens.json      # Particle systems
├── distortion.tokens.json     # Glitch and distortion
├── glow-shadow.tokens.json    # Glow and shadow
├── reflection.tokens.json     # Reflections
├── texture.tokens.json        # Texture effects
├── motion-blur.tokens.json    # Motion blur
├── motion-path.tokens.json    # Motion paths
├── depth.tokens.json          # 3D depth
│
├── # Space and camera tokens
├── camera.tokens.json         # Camera movements
│
├── # Shape and path tokens
├── morphing.tokens.json       # Shape morphing
├── stroke.tokens.json         # Stroke animation
├── masks.tokens.json          # Mask animation
│
├── # Specialized tokens
├── typography.tokens.json     # Text animation
├── stylization.tokens.json    # Artistic styles
├── audio.tokens.json          # Audio-reactive
├── character.tokens.json      # Character animation
├── compositing.tokens.json    # Layer compositing
├── cinematic.tokens.json      # Cinematic effects
├── color.tokens.json          # Color animation
├── physics.tokens.json        # Physics simulation
├── playback.tokens.json       # Playback control
│
├── # Semantic tokens
├── emotion.tokens.json        # Emotion mapping
├── components.tokens.json     # UI components
├── recipes.tokens.json        # Animation recipes
└── export.tokens.json         # Export settings

Token references use W3C DTCG syntax: {motion.duration.medium-1}

Load tokens programmatically or reference by path in skill files.

Sub-Skill Index

Foundation Skills

Disney Principle Skills

Emotion Skills

Pattern Skills

Component Skills

Implementation Skills

Transform Skills

Visibility Skills

Orchestration Skills

Effect Skills

Space & Camera Skills

Shape & Path Skills

Specialized Skills

Production Skills

Color & Physics Skills

Control Skills

Advanced Skills

Quality Skills

Decision Framework

Easing Selection (M3 Baseline)

ENTERING → emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1)
EXITING  → emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15)
MOVING   → standard: cubic-bezier(0.2, 0, 0, 1)
LOOPING  → linear: cubic-bezier(0, 0, 1, 1)

Duration Selection (M3 Baseline)

Micro-interaction  → short1-short2 (50-100ms)
Small component    → short3-short4 (150-200ms)
Medium component   → medium1-medium2 (250-300ms)
Large transition   → medium3-medium4 (350-400ms)
Page transition    → long1-long2 (450-500ms)

Tool Selection

Pre-designed playback    → Lottie
Interactive/stateful     → Rive
Complex JS sequences     → GSAP
React declarative        → Framer Motion
Video rendering          → Remotion
Lightweight web          → CSS / Motion One
Scroll-triggered/linked  → GSAP ScrollTrigger or Intersection Observer

Reduced Motion Strategy

Standardized fallback taxonomy for all animations:

Platform Implementation

/* CSS */
@media (prefers-reduced-motion: reduce) {
  .animated { animation: none; transition: opacity 100ms ease; }
}

// JavaScript
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Framer Motion
import { useReducedMotion } from 'framer-motion';
const shouldReduce = useReducedMotion();

Output Requirements

All implementations must:

1. Use token names from tokens/ (not raw values)
2. Include reduced motion alternative
3. Specify which standard informed the decision
4. Provide code that imports from token files

Version History

• v2.1.0 — Comprehensive motion design coverage
  • Added 11 new skills: color, physics, stylization, playback-control, reflection, skew, depth, texture, audio-reactive, character, export
  • Added 11 new token files for all new skills
  • New categories: color, physics, control
  • Total: 64 skills, 44 token files
• v2.0.0 — Major expansion
  • Added 21 new skills across 8 new categories
  • Added 19 new token files (transforms, visibility, orchestration, effects, shape-path, specialized, production)
  • Added orchestrator skill for autonomous animation generation
  • Categories: transforms, visibility, orchestration, effects, space-camera, shape-path, specialized, production
  • Total: 53 skills, 33 token files
• v1.2.0 — Cohesion & breadth improvements
  • Added manifest.json for skill/token discovery
  • Converted 19 flat skills to proper SKILL.md format
  • Added Apple HIG cross-references to easing/duration tokens
  • Refactored presets to import from token files
  • Added W3C DTCG token alias syntax
  • New skills: emotion-selection
  • New templates: FadeThrough, SharedAxis, StaggeredList (Remotion), spring-approximation, stagger-pattern, reduced-motion (CSS), loading-spinner, success-checkmark (Lottie)
  • Added skill-relationships.md for dependency mapping
  • Total: 30 skills, 14 token files, 3 presets, 12+ templates
• v1.1.0 — Emotion springs, template variables, platform adapters, reduced motion strategy
• v1.0.0 — Initial release with 14 skills and 8 token files