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 (
    <div style={{ width: "100%", height: "100%", background: "#0a0a0f" }}>
      <FadeIn start={0} duration={20}>
        <h1 style={{ fontSize: 72, color: "#fff" }}>Hello World</h1>
      </FadeIn>
      <SlideIn start={25} direction="up">
        <p style={{ fontSize: 28, color: "#a0a0b0" }}>Animated with code</p>
      </SlideIn>
    </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";
<Audio 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 one-time proactive video creation. The agent may offer once when content clearly matches a specific template type. The agent must obtain explicit verbal confirmation before scaffolding any project.

User-facing warning when recurring is mentioned: Cron-based jobs are persistent automation that continue running on schedule until explicitly removed. They consume compute resources and generate output files repeatedly. Always explain this before the user consents.

Offer triggers (one-time only)

The agent may suggest a video one time when these specific content patterns are unambiguous:

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.
• One offer per content: If the user declines or ignores, do not re-offer.
• Recurring prohibited without explicit four-part confirmation: The agent must not create any cron job unless the user explicitly confirms (a) exact schedule, (b) output directory, (c) file retention policy, (d) how to disable. If any part is missing, the agent stops.

Dependencies

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