Назад към всички

open-animate

// 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, bac

$ git log --oneline --stat
stars:1,933
forks:367
updated:March 4, 2026
SKILL.mdreadonly
SKILL.md Frontmatter
nameopen-animate
descriptionOpen 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.
licenseApache-2.0
metadata[object Object]

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

CapabilityTool
Project scaffoldingoanim 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 videooanim render
Cloud renderingoanim render --cloud
AI image generationoanim assets gen-image
AI video generationoanim assets run (kling, minimax, hunyuan models)
AI audio generationoanim assets run (stable-audio model)
Media compositing<Img>, <OffthreadVideo>, <Audio> via staticFile()
Image editingoanim assets edit-image
Background removaloanim assets remove-bg
Image upscalingoanim assets upscale
Any fal.ai modeloanim 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)

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)