Programmatic Video

# Programmatic Video

Part of [Agent Skills™](https://github.com/itallstartedwithaidea/agent-skills) by [googleadsagent.ai™](https://googleadsagent.ai)

## Description

Programmatic Video enables React-based video rendering with Remotion, where every frame is a React component and every animation is expressed in code. The agent builds video compositions with sequences, transitions, spring animations, and data-driven content, producing MP4/WebM output rendered in headless Chromium without any video editing software.

Traditional video editing is manual, non-reproducible, and impossible to template. Programmatic video treats video as code: compositions are versioned in git, parameterized for batch rendering, and tested with snapshot assertions. A single template can generate thousands of personalized videos by changing the input data—product demos, social media clips, onboarding sequences, or marketing videos, each customized per recipient.

Remotion's architecture maps React's component model to video: each component receives a `frame` number and the total `durationInFrames`, using these to calculate animations, transitions, and timing. The agent composes scenes from reusable components, orchestrates their timing with `<Sequence>` wrappers, and applies spring-based physics animations for natural motion.

## Use When

- Creating videos from code without video editing software
- Generating personalized or data-driven video content at scale
- Building animated explainers, product demos, or social media clips
- Automating video production in CI/CD pipelines
- The user requests "programmatic video", "Remotion", or "video from code"
- Producing video assets with consistent branding across hundreds of variants

## How It Works

```mermaid
graph TD
    A[Video Specification] --> B[Define Composition: FPS + Duration]
    B --> C[Build Scene Components]
    C --> D[Arrange with Sequences]
    D --> E[Add Spring Animations]
    E --> F[Inject Dynamic Data]
    F --> G[Preview in Browser]
    G --> H{Approved?}
    H -->|No| C
    H -->|Yes| I[Render: Headless Chromium]
    I --> J[Encode: MP4 / WebM]
    J --> K[Output Video File]
```

Each scene is a React component that receives the current frame number. Compositions define the canvas size, frame rate, and total duration. Sequences place scenes at specific time offsets. Rendering captures each frame as a screenshot and encodes them into video.

## Implementation

```tsx
import { AbsoluteFill, Composition, Sequence, useCurrentFrame, useVideoConfig,
  interpolate, spring } from "remotion";

const TextReveal: React.FC<{ text: string }> = ({ text }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });
  const translateY = spring({ frame, fps, config: { damping: 12, stiffness: 200 } });
  const y = interpolate(translateY, [0, 1], [40, 0]);

  return (
    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
      <h1 style={{
        fontSize: 72,
        fontWeight: "bold",
        color: "white",
        opacity,
        transform: `translateY(${y}px)`,
      }}>
        {text}
      </h1>
    </AbsoluteFill>
  );
};

const DataDrivenSlide: React.FC<{ metric: string; value: number }> = ({ metric, value }) => {
  const frame = useCurrentFrame();
  const displayValue = Math.round(interpolate(frame, [0, 45], [0, value], { extrapolateRight: "clamp" }));

  return (
    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", background: "#0a0a0a" }}>
      <div style={{ textAlign: "center" }}>
        <div style={{ fontSize: 120, fontWeight: "bold", color: "#3b82f6" }}>
          {displayValue.toLocaleString()}
        </div>
        <div style={{ font