Back to Details

open-animate

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Open Animate — Creative Suite for Agents

Open Animate — 面向Agent的创意套件

Create professional motion graphics and generate visual assets. Describe what you want. Get an MP4.
创建专业动态图形并生成视觉资产。描述你的需求，即可获取MP4视频。

Prerequisites

前置条件

This skill builds on Remotion skills for core Remotion API patterns:
bash
npx skills add remotion-dev/skills
本技能基于Remotion技能构建，使用核心Remotion API模式：
bash
npx skills add remotion-dev/skills

Workflow

工作流程

1. Initialize project

1. 初始化项目

bash
npx oanim init my-video
cd my-video
bash
npx oanim init my-video
cd my-video

2. Compose using 
@oanim/core

2. 使用
@oanim/core
进行合成

tsx
import { fadeUp, popIn, Background, SafeArea, palettes } from '@oanim/core';
See 
references/animation-cookbook.md
for the full presets reference.
tsx
import { fadeUp, popIn, Background, SafeArea, palettes } from '@oanim/core';
完整预设参考请查看
references/animation-cookbook.md
。

3. Preview

3. 预览

bash
npx remotion studio
bash
npx remotion studio

4. Render to MP4

4. 渲染为MP4

bash
npx oanim render
bash
npx oanim render

5. Generate and use media assets (optional)

5. 生成并使用媒体资产（可选）

bash
undefined
bash
undefined

Generate image, video, or audio

生成图像、视频或音频

npx oanim assets gen-image --prompt "dark gradient abstract" --out public/bg.png npx oanim assets run --model fal-ai/kling-video/v1/standard/text-to-video
--input '{"prompt":"cinematic abstract motion","duration":"5"}' --out public/clip.mp4 npx oanim assets run --model fal-ai/stable-audio
--input '{"prompt":"ambient electronic, no vocals","duration_in_seconds":30}' --out public/music.mp3

Then use in your composition:
```tsx
import { Img, OffthreadVideo, Audio, staticFile } from 'remotion';

<Img src={staticFile('bg.png')} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
<OffthreadVideo src={staticFile('clip.mp4')} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
<Audio src={staticFile('music.mp3')} volume={0.25} />
npx oanim assets gen-image --prompt "dark gradient abstract" --out public/bg.png npx oanim assets run --model fal-ai/kling-video/v1/standard/text-to-video
--input '{"prompt":"cinematic abstract motion","duration":"5"}' --out public/clip.mp4 npx oanim assets run --model fal-ai/stable-audio
--input '{"prompt":"ambient electronic, no vocals","duration_in_seconds":30}' --out public/music.mp3

随后可在合成中使用：
```tsx
import { Img, OffthreadVideo, Audio, staticFile } from 'remotion';

<Img src={staticFile('bg.png')} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
<OffthreadVideo src={staticFile('clip.mp4')} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
<Audio src={staticFile('music.mp3')} volume={0.25} />

Capabilities

功能特性

CapabilityTool
Project scaffolding
oanim init
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
功能工具
项目脚手架
oanim init
动画预设（fadeUp、popIn、springs）
@oanim/core
组件（Terminal、Card、Badge、GlowOrb）
@oanim/core
场景转场（fadeBlur、clipCircle、wipe）
@oanim/core
排版（AnimatedCharacters、TypewriterText、CountUp）
@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()
使用
<Img>
、
<OffthreadVideo>
、
<Audio>
图像编辑
oanim assets edit-image
背景移除
oanim assets remove-bg
图像放大
oanim assets upscale
任意fal.ai模型
oanim assets run

References

参考文档

  • references/workflow.md
    — Step-by-step agent workflow
  • references/scene-config.md
    — animate.json schema reference
  • references/composition-patterns.md
    — Multi-scene composition architecture
  • references/animation-cookbook.md
    — Full 
    @oanim/core
    presets reference
  • references/asset-generation.md
    — AI asset generation guide
  • references/media-guide.md
    — Using generated media in compositions (Img, Video, Audio)
  • references/workflow.md
    — 分步Agent工作流程
  • references/scene-config.md
    — animate.json schema参考
  • references/composition-patterns.md
    — 多场景合成架构
  • references/animation-cookbook.md
    — 
    @oanim/core
    完整预设参考
  • references/asset-generation.md
    — AI资产生成指南
  • references/media-guide.md
    — 在合成中使用生成的媒体（图像、视频、音频）

Templates

模板

  • templates/launch-video.md
    — 4-scene product launch (5s)
  • templates/explainer.md
    — Step-based explainer video (20s)
  • templates/logo-reveal.md
    — Logo animation with glow (5s)
  • templates/meme-caption.md
    — Vertical social clip (6s)
  • templates/investor-update.md
    — Metrics dashboard (15s)
  • 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秒）