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#

bash

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

2. Install dependencies#

bash

cd my-video && npm install

3. Preview in studio#

bash

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

4. Render to video#

bash

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:

bash

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

TemplateUse CaseDurationstarterBlank canvas with animation primitives6sintroLogo + title + tagline reveal5sdata-kineticAnimated metrics, count-ups, progress bars8sexplainerStep-by-step feature walkthrough10sconversationMulti-speaker dialogue with colored bubblesVariable

Set dimensions for vertical video:

bash

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:

tsx

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

ComponentEffect<FadeIn>Opacity tween<SlideIn>Directional slide with opacity<ScaleIn>Scale up with easing overshoot<Typewriter>Character-by-character text reveal<CountUp>Number counter animation<ProgressBar>Animated progress bar<DriftingGrid>Drifting CSS grid background<FloatingOrb>Ambient floating orb<PulseRing>Expanding attention ring<StaggerChildren>Staggered child animations

Usage example:

tsx

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:

tsx

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:

tsx

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

Load data from JSON#

tsx

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

Render Options#

bash

# 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:

SignalTemplate to suggestPitchUser shares a transcript or interviewconversation"Want me to turn this into a conversation video?"User shares stats, metrics, or KPIsdata-kinetic"These numbers would hit harder as an animated clip."User announces a product/featureintro + custom"Want a quick intro video for the announcement?"User writes a step-by-step guideexplainer"I can animate this into a shareable explainer."User asks for a social media clipintro (vertical)"Want this as a short-form video?"

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)