Animate Skill for Claude

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

• Create a directory: ~/animations/[project-name]/
• Run the scaffold script: bash ~/.claude/skills/animate/scripts/scaffold.sh [project-name] [stack]
• 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 scene patterns:

• references/animation-presets.md — all available transitions, springs, easings
• references/scene-patterns.md — example scene code patterns

For each scene, create a React component in client/src/components/video/video_scenes/:

• Use motion.div with scene transition presets (fadeBlur, scaleFade, slideLeft, splitHorizontal, morphExpand, etc.)
• Use containerVariants and itemVariants for staggered content reveals
• Use vw units for responsive sizing (works at any resolution)
• Use CSS variables for theming (var(--color-accent), var(--color-bg-dark), etc.)
• Use Lucide icons for visual elements
• Use .glass-panel class for frosted glass cards
• Use .text-gradient and .text-gradient-accent for gradient text

Step 5: Generate the VideoTemplate

Create client/src/components/video/VideoTemplate.tsx:

• Import all scene components
• Define SCENE_DURATIONS object (scene name -> milliseconds)
• Use useVideoPlayer hook to manage scene advancement
• Wrap scenes in AnimatePresence mode="wait" for smooth transitions
• Each scene renders conditionally based on currentScene index

Step 6: Customize Theme

Update client/src/index.css with the right colors:

• If the user specified brand colors, update CSS variables
• Choose fonts that match the mood (Space Grotesk for tech, Playfair Display for elegant, etc.)
• Update gradient and glow styles to match the palette

Step 7: Gemini 3.1 Pro Enhancement (Optional)

If GEMINI_API_KEY environment variable is available:

• Read references/gemini-integration.md for API details
• Send the user's description to Gemini 3.1 Pro asking for:
• Scene breakdown with descriptions and suggested transitions
• Color palette as CSS variables
• Copy/headlines for each scene
• SVG graphics if applicable
• Use the Gemini output to inform scene generation
• If no API key, skip this step — Claude handles all creative decisions directly

Step 8: Build and Preview

cd ~/animations/[project-name]
npm install
npm run dev

Tell the user the animation is running at http://localhost:5173 and open it in the browser.

Scene Transition Reference (Quick)

Pick transitions that match the story beat:

• fadeBlur — Soft intro/outro, dreamy reveals
• scaleFade — Confident reveals, product showcases
• slideLeft/slideRight — Sequential progression, timeline flow
• splitHorizontal/splitVertical — Dramatic reveals, before/after
• morphExpand — Grand finale, CTA screens
• clipCircle — Focus attention, spotlight effect
• perspectiveFlip — Card flips, perspective changes
• wipe — Clean transitions, directional flow
• zoomThrough — Immersive, forward momentum
• crossDissolve — Gentle, emotional transitions

Element Animation Reference (Quick)

• popIn — Bouncy scale entrance for icons/badges
• fadeUp/fadeDown — Subtle content reveals
• slideInLeft/slideInRight — Directional content
• blurIn — Soft focus reveals
• elasticScale — Playful, energetic entrances
• perspectiveRotateIn — 3D card reveals
• pulse — Looping attention grab
• float — Gentle hovering effect

Important Rules

• Always use vw units for sizing so animations look good at any resolution
• Keep scenes between 3-5 seconds each — total video 15-30 seconds
• Use AnimatePresence mode="wait" so one scene exits before the next enters
• Every scene must have a background treatment (gradient, image, or animated shape)
• Use staggered animations for lists and grids (staggerChildren: 0.1-0.2)
• Include a loading state if assets are heavy
• The project must be completely self-contained — no external dependencies beyond npm packages
• Do NOT use emojis anywhere in the generated code or content