Animation Generator 是一个从自然语言描述生成动画视频与动态图形的技能，输出为独立的 Vite + React + Framer Motion 项目，可直接在浏览器中播放。
用途
它面向需要快速制作产品介绍、演示、营销视频、生成艺术、3D 场景或简单文字/Logo 动画的场景。用户只需提供一段自然语言描述，技能会将其转化为可运行的动画项目。
主要能力
技能首先解析请求，把描述拆成 3-7 个场景，每个场景 3-5 秒，并识别故事弧线：hero/intro、problem、solution、features、CTA/outro，同时挑选符合品牌或情绪的配色与字体。
随后自动检测最合适的技术栈：产品介绍、演示、营销类默认使用 Framer Motion，基于场景配合文字、图标与转场；生成艺术、粒子、图案使用 p5.js；3D 对象、环境、产品渲染使用 Three.js + react-three-fiber；简单文字/Logo 动画仅用 CSS 动画，不引入重型依赖。除非请求明确需要其他方案，否则默认 Framer Motion。
使用方式
技能会创建目录 ~/animations/[project-name]/，运行脚手架脚本 bash ~/.claude/skills/animate/scripts/scaffold.sh [project-name] [stack]，并把 ~/.claude/skills/animate/assets/template-files/ 中的模板文件复制到项目。
接着读取 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 做渐变文字。
然后生成 client/src/components/video/VideoTemplate.tsx：导入所有场景组件，定义 SCENE_DURATIONS 对象（场景名到毫秒），使用 useVideoPlayer hook 管理场景推进，用 AnimatePresence mode="wait" 包裹场景以实现平滑转场，每个场景根据 currentScene 索引条件渲染。
之后更新 client/src/index.css 定制主题：若用户指定品牌色则更新 CSS 变量，选择符合情绪的字形（如 Space Grotesk 用于科技、Playfair Display 用于优雅），并更新渐变与发光样式。
如果环境变量 GEMINI_API_KEY 可用，技能会读取 references/gemini-integration.md，把用户描述发送给 Gemini 3.1 Pro，请求场景拆分与建议转场、CSS 变量形式的配色、每个场景的文案/标题以及适用的 SVG 图形，并用其输出辅助场景生成；没有 API 密钥则跳过此步，由 Claude 直接完成所有创意决策。
最后进入项目目录执行 npm install 与 npm run dev，动画运行在 http://localhost:5173，并在浏览器中打开。
场景转场与元素动画
场景转场可按故事节拍选择：fadeBlur 用于柔和开场/结尾与梦幻揭示；scaleFade 用于自信揭示与产品展示；slideLeft/slideRight 用于顺序推进与时间线流动；splitHorizontal/splitVertical 用于戏剧性揭示与前后对比；morphExpand 用于盛大结尾与 CTA 画面；clipCircle 用于聚焦注意力与聚光灯效果；perspectiveFlip 用于卡片翻转与视角变化；wipe 用于干净的方向性转场；zoomThrough 用于沉浸式前进感；crossDissolve 用于温和、情绪化的转场。
元素动画包括：popIn 用于图标/徽章的弹跳缩放入场；fadeUp/fadeDown 用于细微内容揭示；slideInLeft/slideInRight 用于方向性内容；blurIn 用于柔焦揭示；elasticScale 用于活泼、有能量的入场；perspectiveRotateIn 用于 3D 卡片揭示；pulse 用于循环吸引注意；float 用于轻柔悬浮效果。
适用场景与限制
适用于需要快速产出浏览器内播放的动画视频与动态图形的场景，尤其是产品介绍、演示、营销、生成艺术、3D 场景与简单文字/Logo 动画。重要规则包括：始终使用 vw 单位以保证任意分辨率下效果良好；每个场景保持 3-5 秒，总视频 15-30 秒；使用 AnimatePresence mode="wait" 让一个场景退出后再进入下一个；每个场景必须有背景处理（渐变、图像或动画形状）；列表与网格使用错落动画（staggerChildren: 0.1-0.2）；资源较重时包含加载状态；项目必须完全自包含，除 npm 包外无外部依赖；生成的代码或内容中不得使用 emoji。
关于收费、价格、平台支持范围等具体信息，资料中暂未提供。