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:
npx skills add remotion-dev/skills
Workflow
1. Initialize project
npx oanim init my-video
cd my-video
2. Compose using @oanim/core
import { fadeUp, popIn, Background, SafeArea, palettes } from '@oanim/core';
See references/animation-cookbook.md for the full presets reference.
3. Preview
npx remotion studio
4. Render to MP4
npx oanim render
5. Generate and use media assets (optional)
# 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:
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
| Capability |
Tool |
| 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 |
References
references/workflow.md — Step-by-step agent workflowreferences/scene-config.md — animate.json schema referencereferences/composition-patterns.md — Multi-scene composition architecturereferences/animation-cookbook.md — Full @oanim/core presets referencereferences/asset-generation.md — AI asset generation guidereferences/media-guide.md — Using generated media in compositions (Img, Video, Audio)
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)
1---2name: open-animate3description: Open Animate — the creative suite for AI agents. Create professional motion graphics, generate images, and render MP4 videos. Use when the user wants to make videos, animations, motion graphics, social clips, product launches, explainers, or any visual content. Supports asset generation (images, backgrounds, upscaling) and video composition with animation presets, transitions, and components.4license: Apache-2.05---6
7# Open Animate — Creative Suite for Agents
8
9Create professional motion graphics and generate visual assets. Describe what you want. Get an MP4.
10
11## Prerequisites
12
13This skill builds on **Remotion skills** for core Remotion API patterns:
14```bash
15npx skills add remotion-dev/skills
16```
17
18## Workflow
19
20### 1. Initialize project
21```bash
22npx oanim init my-video
23cd my-video
24```
25
26### 2. Compose using `@oanim/core`
27```tsx
28import { fadeUp, popIn, Background, SafeArea, palettes } from '@oanim/core';
29```
30
31See `references/animation-cookbook.md` for the full presets reference.
32
33### 3. Preview
34```bash
35npx remotion studio
36```
37
38### 4. Render to MP4
39```bash
40npx oanim render
41```
42
43### 5. Generate and use media assets (optional)
44```bash
45# Generate image, video, or audio
46npx oanim assets gen-image --prompt "dark gradient abstract" --out public/bg.png
47npx oanim assets run --model fal-ai/kling-video/v1/standard/text-to-video \
48 --input '{"prompt":"cinematic abstract motion","duration":"5"}' --out public/clip.mp4
49npx oanim assets run --model fal-ai/stable-audio \
50 --input '{"prompt":"ambient electronic, no vocals","duration_in_seconds":30}' --out public/music.mp3
51```
52
53Then use in your composition:
54```tsx
55import { Img, OffthreadVideo, Audio, staticFile } from 'remotion';
56
57<Img src={staticFile('bg.png')} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
58<OffthreadVideo src={staticFile('clip.mp4')} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
59<Audio src={staticFile('music.mp3')} volume={0.25} />
60```
61
62## Capabilities
63
64| Capability | Tool |
65|------------|------|
66| Project scaffolding | `oanim init` |
67| Animation presets (fadeUp, popIn, springs) | `@oanim/core` |
68| Components (Terminal, Card, Badge, GlowOrb) | `@oanim/core` |
69| Scene transitions (fadeBlur, clipCircle, wipe) | `@oanim/core` |
70| Typography (AnimatedCharacters, TypewriterText, CountUp) | `@oanim/core` |
71| Design tokens (5 palettes, fonts, spacing) | `@oanim/core` |
72| Rendering to video | `oanim render` |
73| Cloud rendering | `oanim render --cloud` |
74| AI image generation | `oanim assets gen-image` |
75| AI video generation | `oanim assets run` (kling, minimax, hunyuan models) |
76| AI audio generation | `oanim assets run` (stable-audio model) |
77| Media compositing | `<Img>`, `<OffthreadVideo>`, `<Audio>` via `staticFile()` |
78| Image editing | `oanim assets edit-image` |
79| Background removal | `oanim assets remove-bg` |
80| Image upscaling | `oanim assets upscale` |
81| Any fal.ai model | `oanim assets run` |
82
83## References
84
85- `references/workflow.md` — Step-by-step agent workflow
86- `references/scene-config.md` — animate.json schema reference
87- `references/composition-patterns.md` — Multi-scene composition architecture
88- `references/animation-cookbook.md` — Full `@oanim/core` presets reference
89- `references/asset-generation.md` — AI asset generation guide
90- `references/media-guide.md` — Using generated media in compositions (Img, Video, Audio)
91
92## Templates
93
94- `templates/launch-video.md` — 4-scene product launch (5s)
95- `templates/explainer.md` — Step-based explainer video (20s)
96- `templates/logo-reveal.md` — Logo animation with glow (5s)
97- `templates/meme-caption.md` — Vertical social clip (6s)
98- `templates/investor-update.md` — Metrics dashboard (15s)
modbender