Remotion Rule: Parameters

What it is

The Remotion Rule: Parameters is a skill rule from the official Remotion Agent Skill set. It provides guidance for AI coding agents on making Remotion video compositions parametrizable using Zod schemas. By defining input parameters, you create videos that accept dynamic data: text, colors, URLs, numbers, or any structured input.

This rule targets developers using AI assistants to build Remotion video templates. Parametrizable videos enable batch rendering with different data inputs, turning a single video template into hundreds of personalized outputs.

How it saves time or tokens

Without parameter schemas, every variation of a video requires code changes. With Zod-validated parameters, you define the shape of inputs once and pass different data at render time. The AI agent learns the correct pattern from this rule, avoiding trial-and-error with Remotion's parameter API.

The rule is approximately 500 tokens and activates automatically when parameter work is detected in a Remotion project.

How to use

1. Install the Remotion skills:

npx skills add remotion-dev/skills

1. Define a Zod schema for your video parameters:

import { z } from 'zod';

export const myVideoSchema = z.object({
  title: z.string(),
  subtitle: z.string().optional(),
  backgroundColor: z.string().default('#000000'),
  duration: z.number().min(1).max(60),
});

1. Register the schema with your Remotion composition:

import { Composition } from 'remotion';
import { MyVideo } from './MyVideo';
import { myVideoSchema } from './schema';

export const Root: React.FC = () => {
  return (
    <Composition
      id='MyVideo'
      component={MyVideo}
      schema={myVideoSchema}
      defaultProps={{
        title: 'Hello World',
        backgroundColor: '#1a1a2e',
        duration: 10,
      }}
      durationInFrames={300}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

Example

Rendering a parametrized video from the CLI:

# Render with custom parameters
npx remotion render MyVideo out.mp4 \
  --props='{"title": "Q1 Report", "backgroundColor": "#16213e", "duration": 15}'

# Batch render with different data
for name in Alice Bob Charlie; do
  npx remotion render MyVideo "${name}.mp4" \
    --props="{\"title\": \"Welcome ${name}\", \"duration\": 5}"
done

Related on TokRepo

• AI tools for video -- Video production and rendering tools
• AI tools for coding -- AI-assisted development tools

Common pitfalls

• Not adding default values to optional parameters. Without defaults, the Remotion Studio preview may crash when parameters are missing. Use .default() or .optional() with sensible fallbacks.
• Putting business logic in the schema. Zod schemas should validate shape and type. Complex validation (checking if a URL is reachable) belongs in the component, not the schema.
• Forgetting to export the schema. The schema must be exported and referenced in the Composition component. An unexported schema means parameters are not validated.