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)

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

bash

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

animate

NPX Install

Tags

SKILL.md Content