animate

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

根据自然语言描述生成动画视频和动态图形。输出一个可在浏览器中运行的独立 Vite + React + Framer Motion 项目。

Workflow

工作流程

Step 1: Parse the Request

步骤1：解析请求

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

将用户的描述拆解为场景规划：

3-7个场景，每个场景时长3-5秒
梳理故事脉络：开场/引入、问题、解决方案、功能、行动号召/结尾
选择符合品牌/氛围的配色方案和排版
使用
```
$ARGUMENTS
```
获取用户的动画描述

Step 2: Choose the Animation Stack

步骤2：选择动画技术栈

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.

根据请求自动检测最佳实现方案：

请求类型	技术栈	适用场景
产品介绍、演示文稿、营销内容	Framer Motion（默认）	基于场景的文本、图标、过渡动画
生成式艺术、粒子效果、图案	p5.js	创意/算法视觉效果
3D对象、环境、产品渲染	Three.js + react-three-fiber	需要3D场景的情况
简单文本/Logo动画	仅CSS动画	轻量需求，无重型依赖

除非请求明确需要其他方案，否则默认使用 Framer Motion。

Step 3: Scaffold the Project

步骤3：搭建项目框架

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

创建目录：
```
~/animations/[project-name]/
```

运行搭建脚本：

bash ~/.claude/skills/animate/scripts/scaffold.sh [project-name] [stack]

将模板文件从

~/.claude/skills/animate/assets/template-files/

复制到项目中

Step 4: Generate Scene Components

步骤4：生成场景组件

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

查阅动画预设和场景模式参考文档：

```
references/animation-presets.md
```
— 所有可用的过渡效果、弹簧动画、缓动函数
```
references/scene-patterns.md
```
— 示例场景代码模式

为每个场景在

client/src/components/video/video_scenes/

中创建一个React组件：

使用
```
motion.div
```
并应用场景过渡预设（fadeBlur、scaleFade、slideLeft、splitHorizontal、morphExpand等）
使用
```
containerVariants
```
和
```
itemVariants
```
实现内容的交错显示
使用
```
vw
```
单位实现响应式尺寸适配（适配任意分辨率）
使用CSS变量实现主题定制（
```
var(--color-accent)
```
、
```
var(--color-bg-dark)
```
等）
使用Lucide图标作为视觉元素
使用
```
.glass-panel
```
类实现毛玻璃卡片效果
使用
```
.text-gradient
```
和
```
.text-gradient-accent
```
实现渐变文本

Step 5: Generate the VideoTemplate

步骤5：生成视频模板

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

创建

client/src/components/video/VideoTemplate.tsx

：

导入所有场景组件
定义
```
SCENE_DURATIONS
```
对象（场景名称 -> 毫秒数）
使用
```
useVideoPlayer
```
钩子管理场景切换
将场景包裹在
```
AnimatePresence mode="wait"
```
中以实现平滑过渡
根据
```
currentScene
```
索引条件渲染每个场景

Step 6: Customize Theme

步骤6：定制主题

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

更新

client/src/index.css

中的配色：

如果用户指定了品牌色，更新CSS变量
选择符合氛围的字体（科技风用Space Grotesk，优雅风用Playfair Display等）
更新渐变和发光效果以匹配配色方案

Step 7: Gemini 3.1 Pro Enhancement (Optional)

步骤7：Gemini 3.1 Pro 增强（可选）

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

如果存在

GEMINI_API_KEY

环境变量：

查阅
```
references/gemini-integration.md
```
获取API详情
将用户的描述发送给Gemini 3.1 Pro，请求返回：
- 包含描述和建议过渡效果的场景拆解
- 以CSS变量形式提供的配色方案
- 每个场景的文案/标题
- 适用的SVG图形（如有）
使用Gemini的输出来优化场景生成
如果没有API密钥，跳过此步骤 — 由Claude直接处理所有创意决策

Step 8: Build and Preview

步骤8：构建并预览

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.

bash

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

告知用户动画已在

http://localhost:5173

运行，并在浏览器中打开该地址。

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

根据故事节奏选择过渡效果：

fadeBlur — 柔和的开场/结尾、梦幻风格的显示效果
scaleFade — 自信的展示效果、产品介绍
slideLeft/slideRight — 顺序推进、时间线流程
splitHorizontal/splitVertical — 戏剧性展示、前后对比
morphExpand — 盛大收尾、行动号召屏幕
clipCircle — 聚焦注意力、聚光灯效果
perspectiveFlip — 卡片翻转、视角变化
wipe — 简洁过渡、定向流程
zoomThrough — 沉浸式体验、向前推进感
crossDissolve — 柔和过渡、情感化效果

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

popIn — 图标/徽章的弹性缩放入场效果
fadeUp/fadeDown — 微妙的内容显示效果
slideInLeft/slideInRight — 定向内容入场
blurIn — 柔焦显示效果
elasticScale — 活泼、充满活力的入场效果
perspectiveRotateIn — 3D卡片显示效果
pulse — 循环播放的注意力吸引效果
float — 轻微悬浮效果

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

始终使用
```
vw
```
单位进行尺寸设置，确保动画在任意分辨率下都能正常显示
每个场景时长保持在3-5秒之间 — 总视频时长15-30秒
使用
```
AnimatePresence mode="wait"
```
确保前一个场景退出后再进入下一个场景
每个场景都必须有背景处理（渐变、图片或动画形状）
对列表和网格使用交错动画（staggerChildren: 0.1-0.2）
如果资源较大，需包含加载状态
项目必须完全独立 — 除npm包外无外部依赖
生成的代码或内容中禁止使用表情符号