The Complete Production SOP: How to Deploy and Run Remotion Programmatic Video Creation in React in Autonomous AI Agents

---
name: "remotion-programmatic-react-video"
description: "Generate and render MP4 videos programmatically using standard React components."
metadata:
  author: "Remotion"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create video with react remotion"
  - "animate frames remotion"
  - "render mp4 video remotion"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: true
  net_access: false
---

import { Composition } from 'remotion';
import { MainVideo, mainVideoSchema } from './MainVideo';

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MainVideo"
      component={MainVideo}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
      schema={mainVideoSchema}
      defaultProps={{
        titleText: 'Deterministic AI Agent Video',
        primaryColor: '#6366f1',
      }}
    />
  );
};

import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';
import { z } from 'zod';

export const mainVideoSchema = z.object({
  titleText: z.string(),
  primaryColor: z.string(),
});

export const MainVideo: React.FC<z.infer<typeof mainVideoSchema>> = ({ titleText, primaryColor }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const entrance = spring({
    frame,
    fps,
    config: { damping: 12, mass: 0.5 },
  });

  const opacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });
  const translateY = interpolate(entrance, [0, 1], [50, 0]);

  return (
    <div style={{ flex: 1, backgroundColor: '#0f172a', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
      <h1 style={{ color: primaryColor, opacity, transform: `translateY(${translateY}px)`, fontSize: 72, fontFamily: 'sans-serif' }}>
        {titleText}
      </h1>
    </div>
  );
};