Programmatic Video

Programmatic Video

Part of Agent Skills™ by 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 `` 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

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

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

const TextReveal: React.FC = ({ 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 (
    
      
        {text}
      
    
  );
};

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

  return (
    
      
        
          {displayValue.toLocaleString()}
        
        {metric}
      
    
  );
};

export const MainComposition: React.FC }> = ({
  title, metrics
}) => {
  return (
    
      
        
      
      {metrics.map((m, i) => (
        
          
        
      ))}
    
  );
};

export const RemotionRoot: React.FC = () => (
  
);

# Preview in browser
npx remotion studio

# Render to MP4
npx remotion render MainVideo output.mp4

# Batch render with different data
npx remotion render MainVideo --props='{"title":"Q2","metrics":[...]}'

Best Practices

• Use spring() for natural-feeling animations instead of linear interpolation
• Clamp all interpolate() calls to prevent values from overshooting
• Keep compositions at 30fps for standard content, 60fps for smooth motion
• Preload all assets (images, fonts) before rendering to avoid missing frames
• Use `` to organize scenes with explicit timing, not frame-based conditionals
• Test video output at multiple resolutions (1080p, 720p, square) for platform compatibility

Platform Compatibility

| Platform | Support | Notes | |----------|---------|-------| | Cursor | Full | React + Remotion development | | VS Code | Full | Remotion extension available | | Windsurf | Full | React-based development | | Claude Code | Full | Component + config generation | | Cline | Full | Video pipeline setup | | aider | Partial | Code generation only |

Related Skills

• [Web Asset Generation](../web-asset-generation/)
• [ML Model Integration](../ml-model-integration/)
• [View Transitions](../../web-frontend/view-transitions/)
• [Batch Processing](../../productivity/batch-processing/)

Keywords

programmatic-video remotion react-video animation data-driven-video batch-rendering composition spring-animation

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: itallstartedwithaidea
• Source: itallstartedwithaidea/agent-skills
• License: MIT
• Homepage: https://googleadsagent.ai

Install and usage instructions live in the source repository linked above.