OPEN ANIMATE
[Home](/) [Docs](https://docs.open-animate.com) [GitHub](https://github.com/jacobcwright/open-animate)
[Console](https://oanim.dev)
# The creative suite for agents.
## Open-source toolkit that gives coding agents the power to generate images, compose videos, and create motion graphics — all through code.
npx oanim init my-video
Works with: Claude Code, Cursor, Codex, Windsurf, any agent that writes code
## Quickstart
Your agent's first video is 60 seconds away.
### Step 1 — Scaffold
npx oanim init my-video cd my-video
Creates a project with @oanim/core — animation presets, transitions, components, and design tokens pre-configured.
### Step 2 — Compose
Your agent writes src/MyComp.tsx:
import { AbsoluteFill, useCurrentFrame, useVideoConfig } from 'remotion';
import { fadeUp, Background, SafeArea, palettes } from '@oanim/core';
const colors = palettes.dark;
export const MyComp: React.FC = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
return (
<AbsoluteFill>
<Background gradient={`linear-gradient(135deg, ${colors.bg}, ${colors.bgAlt})`} />
<SafeArea style={{ justifyContent: 'center', alignItems: 'center' }}>
<div style={{
...fadeUp({ frame, fps, delay: 0.2 }),
fontSize: 80,
fontWeight: 700,
color: colors.text,
}}>
Hello World
</div>
</SafeArea>
</AbsoluteFill>
);
};### Step 3 — Preview
npx remotion studio
Opens a live preview at localhost:3000 with timeline scrubbing.
### Step 4 — Render
npx oanim render
Outputs out/MyComp.mp4. Override with flags:
npx oanim render --fps 60 --res 3840x2160 --codec h265
### Step 5 — Generate media (optional)
npx oanim login npx oanim assets gen-image --prompt "dark abstract gradient, purple and blue" --out public/bg.png
You can also generate video and audio — see the Working with Media guide.
## Capabilities
- AI Media Generation — Generate images, video, and audio. Edit photos, remove backgrounds, upscale. Run any of 30+ AI models via oanim assets run.
- Video Composition — Compose React-based videos with Remotion. 8 animation presets, 14 transitions, typography, and production-ready components.
- Design System — 5 color palettes, font stacks, spacing, and components tuned for 1920x1080.
- Cloud Rendering — Render locally or in the cloud. No Chromium or ffmpeg needed for --cloud.
## Templates
- Product Launch (5s, 1920x1080) — Gradient background, logo pop-in, CTA slide. Uses: fadeUp, popIn, AnimatedCharacters, Background, SafeArea, Badge, Card
- Explainer (20s, 1920x1080) — 4 numbered steps with staggered entrances and fadeBlur transitions. Uses: AnimatedCharacters, fadeUp, wipe, clipCircle, Background, SafeArea, Grid
- Logo Reveal (5s, 1920x1080) — GlowOrb builds, logo snaps in with elasticScale, tagline fades up. Uses: popIn, blurIn, GlowOrb, Background, Vignette
- Metrics Dashboard (15s, 1920x1080) — CountUp animations for revenue, users, and growth. Uses: CountUp, fadeUp, Card, Background, SafeArea, palettes.midnight
- Meme Caption (6s, 1080x1920) — Vertical. Bold text, shake entrance, zoom. Uses: fadeUp, elasticScale, Background, SafeArea
- Hello World (5s, 1920x1080) — Minimal. Single fadeUp on centered text.
## Packages
| Package | Description |
|---------|-------------|
| `oanim` | CLI — scaffolding, rendering, asset generation |
| `@oanim/core` | Animation presets, transitions, components, design tokens |
## llms.txt
- [oanim assets](https://docs.open-animate.com/cli/assets.md): Generate images, video, audio, and more with AI
- [oanim init](https://docs.open-animate.com/cli/init.md): Scaffold a new video project
- [oanim render](https://docs.open-animate.com/cli/render.md): Export your composition to MP4
- [Design Tokens](https://docs.open-animate.com/core/design-tokens.md): Color palettes, font stacks, and spacing scale
- [Element Animations](https://docs.open-animate.com/core/element-animations.md): 8 animation presets
- [Springs & Easings](https://docs.open-animate.com/core/springs-and-easings.md): Spring presets and easing curves
- [Transitions](https://docs.open-animate.com/core/transitions.md): 14 drop-in transition presets for scene changes
- [Typography](https://docs.open-animate.com/core/typography.md): AnimatedCharacters, TypewriterText, and CountUp
- [UI Components](https://docs.open-animate.com/core/ui-components.md): Composable building blocks for scene layouts
- [Agent Skill](https://docs.open-animate.com/guides/agent-skill.md): Structured references and templates for agents
- [Composition Patterns](https://docs.open-animate.com/guides/composition-patterns.md): Multi-scene architecture and layering
- [Working with Media](https://docs.open-animate.com/guides/media.md): Generate images, video, and audio with AI
- [Introduction](https://docs.open-animate.com/index.md): The open-source creative suite for AI agents
- [API Keys](https://docs.open-animate.com/platform/api-keys.md): Create and manage API keys
- [Authentication](https://docs.open-animate.com/platform/authentication.md): Sign in via browser OAuth or API key
- [Cloud Rendering](https://docs.open-animate.com/platform/cloud-rendering.md): Render videos in the cloud
- [Console](https://docs.open-animate.com/platform/console.md): Web dashboard for managing your account
- [Credits & Billing](https://docs.open-animate.com/platform/credits-and-billing.md): Pay-as-you-go credits
- [Platform Overview](https://docs.open-animate.com/platform/overview.md): Hosted infrastructure overview
- [Self-Hosting](https://docs.open-animate.com/platform/self-hosting.md): Run the platform on your own infrastructure
- [Usage](https://docs.open-animate.com/platform/usage.md): Track credit balance and usage history
- [Quickstart](https://docs.open-animate.com/quickstart.md): Your agent's first video in 60 seconds
- [Templates](https://docs.open-animate.com/templates.md): Pre-built video compositions
- [GitHub](https://github.com/jacobcwright/open-animate)
Apache 2.0 — Everything is open source and self-hostable.
[Get Started](https://docs.open-animate.com/quickstart) [Docs](https://docs.open-animate.com) [GitHub](https://github.com/jacobcwright/open-animate)