Open Animate — Creative Suite for Agents
Create professional motion graphics and generate visual assets. Describe what you want. Get an MP4.
Prerequisites
This skill builds on Remotion skills for core Remotion API patterns:
CODEBLOCK0
Workflow
1. Initialize project
CODEBLOCK1
2. Compose using @oanim/core
CODEBLOCK2
See references/animation-cookbook.md for the full presets reference.
3. Preview
CODEBLOCK3
4. Render to MP4
CODEBLOCK4
5. Generate and use media assets (optional)
CODEBLOCK5
Then use in your composition:
CODEBLOCK6
Capabilities
Capability Tool Project scaffolding INLINECODE2 Animation presets (fadeUp, popIn, springs)
@oanim/core |
| Components (Terminal, Card, Badge, GlowOrb) |
@oanim/core |
| Scene transitions (fadeBlur, clipCircle, wipe) |
@oanim/core |
| Typography (AnimatedCharacters, TypewriterText, CountUp) |
@oanim/core |
| Design tokens (5 palettes, fonts, spacing) |
@oanim/core |
| Rendering to video |
oanim render |
| Cloud rendering |
oanim render --cloud |
| AI image generation |
oanim assets gen-image |
| AI video generation |
oanim assets run (kling, minimax, hunyuan models) |
| AI audio generation |
oanim assets run (stable-audio model) |
| Media compositing |
<Img>,
<OffthreadVideo>,
<Audio> via
staticFile() |
| Image editing |
oanim assets edit-image |
| Background removal |
oanim assets remove-bg |
| Image upscaling |
oanim assets upscale |
| Any fal.ai model |
oanim assets run |
References
- references/workflow.md — Step-by-step agent workflow INLINECODE22 — animate.json schema reference INLINECODE23 — Multi-scene composition architecture INLINECODE24 — Full @oanim/core presets reference INLINECODE26 — AI asset generation guide INLINECODE27 — Using generated media in compositions (Img, Video, Audio)
Templates
- templates/launch-video.md — 4-scene product launch (5s) INLINECODE29 — Step-based explainer video (20s) INLINECODE30 — Logo animation with glow (5s) INLINECODE31 — Vertical social clip (6s) INLINECODE32 — Metrics dashboard (15s)
Open Animate — 面向智能体的创意套件
创建专业动态图形并生成视觉资产。描述你的需求,即可获得MP4视频。
前置条件
本技能基于 Remotion技能 构建核心Remotion API模式:
bash
npx skills add remotion-dev/skills
工作流程
1. 初始化项目
bash
npx oanim init my-video
cd my-video
2. 使用 @oanim/core 进行合成
tsx
import { fadeUp, popIn, Background, SafeArea, palettes } from @oanim/core;
完整预设参考请参见 references/animation-cookbook.md。
3. 预览
bash
npx remotion studio
4. 渲染为MP4
bash
npx oanim render
5. 生成并使用媒体资产(可选)
bash
生成图片、视频或音频
npx oanim assets gen-image --prompt 暗色渐变抽象 --out public/bg.png
npx oanim assets run --model fal-ai/kling-video/v1/standard/text-to-video \
--input {prompt:电影感抽象动态,duration:5} --out public/clip.mp4
npx oanim assets run --model fal-ai/stable-audio \
--input {prompt:环境电子乐,无人声,duration
in seconds:30} --out public/music.mp3
然后在合成中使用:
tsx
import { Img, OffthreadVideo, Audio, staticFile } from remotion;
功能列表
功能 工具 项目脚手架 oanim init 动画预设(fadeUp、popIn、弹簧动画)
@oanim/core |
| 组件(终端、卡片、徽章、发光球体) | @oanim/core |
| 场景过渡(模糊淡出、圆形裁剪、擦除) | @oanim/core |
| 排版(动画字符、打字机文本、数字递增) | @oanim/core |
| 设计令牌(5套调色板、字体、间距) | @oanim/core |
| 渲染为视频 | oanim render |
| 云端渲染 | oanim render --cloud |
| AI图片生成 | oanim assets gen-image |
| AI视频生成 | oanim assets run(kling、minimax、hunyuan模型) |
| AI音频生成 | oanim assets run(stable-audio模型) |
| 媒体合成 | 通过 staticFile() 使用
、
、 |
| 图片编辑 | oanim assets edit-image |
| 背景移除 | oanim assets remove-bg |
| 图片放大 | oanim assets upscale |
| 任意fal.ai模型 | oanim assets run |
参考文档
- references/workflow.md — 分步智能体工作流程 references/scene-config.md — animate.json 模式参考 references/composition-patterns.md — 多场景合成架构 references/animation-cookbook.md — 完整 @oanim/core 预设参考 references/asset-generation.md — AI资产生成指南 references/media-guide.md — 在合成中使用生成的媒体(Img、Video、Audio)
模板
- templates/launch-video.md — 4场景产品发布(5秒) templates/explainer.md — 基于步骤的解说视频(20秒) templates/logo-reveal.md — 带发光效果的Logo动画(5秒) templates/meme-caption.md — 竖屏社交短片(6秒) templates/investor-update.md — 数据指标看板(15秒)