Agent Hub

remotion-video

Properties1
tagsskill, command

5 min read

Skill

Owner: Jarvis · Team: Jarvis · Source: ~/.openclaw/workspace/skills/remotion-video/SKILL.md

AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional videos, product demos, social media videos, animated explainers, or any programmatic video content. Produces polished motion graphics, not slideshows.

Playbook (mirrored from disk)

Video Generator (Remotion)

Create professional motion graphics videos programmatically with React and Remotion.

Default Workflow (ALWAYS follow this)

  1. Create the project in output/<project-name>/
  2. Build all scenes with proper motion graphics
  3. Install dependencies with npm install
  4. Fix package.json scripts to use npx remotion (not bun): 
    "scripts": {
  "dev": "npx remotion studio",
  "build": "npx remotion bundle"
}
  5. Start Remotion Studio as a background process: 
    cd output/<project-name> && npm run dev
    Wait for “Server ready” on port 3000.
  6. Send the user the local URL (e.g. http://localhost:3000)

The user will preview in their browser, request changes, and you edit the source files. Remotion hot-reloads automatically.

Rendering (only when user explicitly asks to export):

cd output/<project-name>
npx remotion render CompositionName out/video.mp4

Quick Start

# Scaffold project
cd output && npx --yes create-video@latest my-video --template blank
cd my-video && npm install
 
# Add motion libraries
npm install lucide-react
 
# Fix scripts in package.json (replace any "bun" references with "npx remotion")
 
# Start dev server
npm run dev

Core Architecture

Scene Management

Use scene-based architecture with proper transitions:

const SCENE_DURATIONS: Record<string, number> = {
  intro: 3000,     // 3s hook
  problem: 4000,   // 4s dramatic
  solution: 3500,  // 3.5s reveal
  features: 5000,  // 5s showcase
  cta: 3000,       // 3s close
};

Video Structure Pattern

import {
  AbsoluteFill, Sequence, useCurrentFrame,
  useVideoConfig, interpolate, spring,
  Img, staticFile, Audio,
} from "remotion";
 
export const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames } = useVideoConfig();
 
  return (
    <AbsoluteFill>
      {/* Background music */}
      <Audio src={staticFile("audio/bg-music.mp3")} volume={0.35} />
 
      {/* Persistent background layer - OUTSIDE sequences */}
      <AnimatedBackground frame={frame} />
 
      {/* Scene sequences */}
      <Sequence from={0} durationInFrames={90}>
        <IntroScene />
      </Sequence>
      <Sequence from={90} durationInFrames={120}>
        <FeatureScene />
      </Sequence>
    </AbsoluteFill>
  );
};

Motion Graphics Principles

AVOID (Slideshow patterns)

  • Fading to black between scenes
  • Centered text on solid backgrounds
  • Same transition for everything
  • Linear/robotic animations
  • Static screens
  • slideLeft, slideRight, crossDissolve, fadeBlur presets
  • Emoji icons — NEVER use emoji, always use Lucide React icons

PURSUE (Motion graphics)

  • Overlapping transitions (next starts BEFORE current ends)
  • Layered compositions (background/midground/foreground)
  • Spring physics for organic motion
  • Varied timing (2-5s scenes, mixed rhythms)
  • Continuous visual elements across scenes
  • Custom transitions with clipPath, 3D transforms, morphs
  • Lucide React for ALL icons (npm install lucide-react) — never emoji

Transition Techniques

  1. Morph/Scale - Element scales up to fill screen, becomes next scene’s background
  2. Wipe - Colored shape sweeps across, revealing next scene
  3. Zoom-through - Camera pushes into element, emerges into new scene
  4. Clip-path reveal - Circle/polygon grows from point to reveal
  5. Persistent anchor - One element stays while surroundings change
  6. Directional flow - Scene 1 exits right, Scene 2 enters from right
  7. Split/unfold - Screen divides, panels slide apart
  8. Perspective flip - Scene rotates on Y-axis in 3D

Animation Timing Reference

const timing = {
  micro: 0.1-0.2,      // Small shifts, subtle feedback
  snappy: 0.2-0.4,     // Element entrances, position changes
  standard: 0.5-0.8,   // Scene transitions, major reveals
  dramatic: 1.0-1.5,   // Hero moments, cinematic reveals
};
 
const springs = {
  snappy: { stiffness: 400, damping: 30 },
  bouncy: { stiffness: 300, damping: 15 },
  smooth: { stiffness: 120, damping: 25 },
};

Visual Style Guidelines

Typography

  • One display font + one body font max
  • Massive headlines, tight tracking
  • Mix weights for hierarchy
  • Keep text SHORT (viewers can’t pause)

Colors

  • Simple, clean backgrounds are generally best
  • Intentional accent colors

Layout

  • Use asymmetric layouts, off-center type
  • Edge-aligned elements create visual tension
  • Generous whitespace as design element

Remotion Essentials

Interpolation

const opacity = interpolate(frame, [0, 30], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp"
});
 
const scale = spring({
  frame, fps,
  from: 0.8, to: 1,
  durationInFrames: 30,
  config: { damping: 12 }
});

Sequences with Overlap

<Sequence from={0} durationInFrames={100}>
  <Scene1 />
</Sequence>
<Sequence from={80} durationInFrames={100}>
  <Scene2 />
</Sequence>

Quality Tests

Before delivering, verify:

  • Mute test: Story follows visually without sound?
  • Squint test: Hierarchy visible when squinting?
  • Timing test: Motion feels natural, not robotic?
  • Consistency test: Similar elements behave similarly?
  • Slideshow test: Does NOT look like PowerPoint?
  • Loop test: Video loops smoothly back to start?

Implementation Steps

  1. Director’s treatment — Write vibe, camera style, emotional arc
  2. Visual direction — Colors, fonts, animation style
  3. Scene breakdown — List every scene with description, duration, text, transitions
  4. Define durations — Vary pacing (2-3s punchy, 4-5s dramatic)
  5. Build persistent layer — Animated background outside scenes
  6. Build scenes — Each with enter/exit animations, 3-5 timed moments
  7. Start Remotion Studio — npm run dev on port 3000
  8. Iterate — Edit source, hot-reload, repeat
  9. Render — Only when user says to export final video

File Structure

my-video/
├── src/
│   ├── Root.tsx              # Composition definitions
│   ├── index.ts              # Entry point
│   ├── MyVideo.tsx           # Main video component
│   └── scenes/               # Scene components
├── public/
│   ├── images/
│   └── audio/                # Background music
├── remotion.config.ts
└── package.json

References

See references/components.md for reusable components.
See references/patterns.md for composition patterns.
See scripts/remotion.sh for CLI wrapper.

Graph View