animate

# Animation Generator Create animated videos and motion graphics from a natural language description. Outputs a standalone Vite + React + Framer Motion project that plays in the browser. ## Workflow ### Step 1: Parse the Request Break the user's description into a scene plan: - **3-7 scenes**, each 3-5 seconds long - Identify the story arc: hero/intro, problem, solution, features, CTA/outro - Pick a color palette and typography that fits the brand/mood - Use `$ARGUMENTS` for the user's animation description ### Step 2: Choose the Animation Stack Auto-detect the best approach based on the request: | Request Type | Stack | When to Use | |---|---|---| | Product intro, presentation, marketing | **Framer Motion** (default) | Scene-based with text, icons, transitions | | Generative art, particles, patterns | **p5.js** | Creative/algorithmic visuals | | 3D objects, environments, product renders | **Three.js + react-three-fiber** | 3D scenes needed | | Simple text/logo animation | **CSS animations only** | Minimal, no heavy deps | Default to **Framer Motion** unless the request clearly needs something else. ### Step 3: Scaffold the Project 1. Create a directory: `~/animations/[project-name]/` 2. Run the scaffold script: `bash ~/.claude/skills/animate/scripts/scaffold.sh [project-name] [stack]` 3. Copy template files from `~/.claude/skills/animate/assets/template-files/` into the project ### Step 4: Generate Scene Components Read the references for animation presets and sc...