Remotion Animator

Your agent builds animated videos with components. No After Effects needed — write code, preview in browser, render to MP4.

Showcase

Your agent scaffolds, builds, and renders videos on demand. Templates for intros, explainers, data visualizations, and dialogue videos. A library of animation components your agent composes and customizes for each task.

📹 Watch the showcase video

Quick Start

1. Scaffold a project

python /path/to/skill/scripts/new-project.py my-video

2. Install dependencies

cd my-video && npm install

3. Preview in studio

npm run dev
# Open http://localhost:3000

4. Render to video

npm run render
# Or use the render helper:
python /path/to/skill/scripts/render.py --output out/video.mp4 --quality high

Templates

Scaffold with a pre-built template instead of the starter:

python scripts/new-project.py my-intro --template intro
python scripts/new-project.py my-stats --template data-kinetic
python scripts/new-project.py my-tutorial --template explainer
python scripts/new-project.py my-podcast --template conversation

Set dimensions for vertical video:

python scripts/new-project.py my-reel --template intro --width 1080 --height 1920

Animation Components

Import from ./components in any project scaffolded from this skill:

import { FadeIn, SlideIn, ScaleIn, Typewriter, CountUp, ProgressBar } from "./components";

Usage example:

export const MyVideo: React.FC = () => {
  return (
    \x3Cdiv style={{ width: "100%", height: "100%", background: "#0a0a0f" }}>
      \x3CFadeIn start={0} duration={20}>
        \x3Ch1 style={{ fontSize: 72, color: "#fff" }}>Hello World\x3C/h1>
      \x3C/FadeIn>
      \x3CSlideIn start={25} direction="up">
        \x3Cp style={{ fontSize: 28, color: "#a0a0b0" }}>Animated with code\x3C/p>
      \x3C/SlideIn>
    \x3C/div>
  );
};

Customizing Templates

Change colors

Edit gradient backgrounds or component color props:

background: "linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%)"

Change timing

All animations are frame-based. At 30fps:

• 30 frames = 1 second
• 15 frames = 0.5 seconds

Add audio

Place audio in public/audio.mp3, then:

import { Audio, staticFile } from "remotion";
\x3CAudio src={staticFile("audio.mp3")} />

Load data from JSON

const data = require("../data/content.json");

Render Options

# High quality, smaller file
python scripts/render.py --quality high --codec h264

# ProRes for editing
python scripts/render.py --codec prores --quality ultra

# Vertical video
python scripts/render.py --output out/reel.mp4
# (Set composition width/height in Root.tsx)

Resources

• references/proactivity.md — When and how to suggest animation proactively
• references/component-api.md — Full component API reference
• references/animation-patterns.md — Timing, easing, stagger, loops, audio sync
• assets/boilerplate/ — Base Remotion project with component library
• assets/templates/ — Pre-built compositions (intro, data-kinetic, explainer, conversation)
• scripts/new-project.py — Project scaffolding tool
• scripts/render.py — Render helper with quality presets

Proactivity

This skill enables proactive video creation. The agent should offer to make an animation when these patterns appear (without the user explicitly asking for "a video"):

Offer triggers

Pitch rules

• Ask, don't assume: "Want me to animate this?" not "I'm making a video."
• Suggest a template: Reference the specific template by name.
• Estimate effort: "~5 minutes to scaffold, you edit text + render."
• Don't spam: If the user declines or ignores, don't re-offer on the same content.
• Batch recurring: Weekly recaps or monthly reports are good cron candidates.

See references/proactivity.md for full decision logic and copy-paste pitch templates.

Dependencies

• Node.js + npm
• @remotion/cli (included in boilerplate package.json)