claude-skills/remotion/rules/parameters.md

name, description, metadata

name	description	metadata
parameters	Make a video parametrizable by adding a Zod schema	tags parameters, zod, schema

To make a video parametrizable, a Zod schema can be added to a composition.

First, zod must be installed - it must be exactly version 3.22.3.

Search the project for lockfiles and run the correct command depending on the package manager:

If package-lock.json is found, use the following command:

npm i zod@3.22.3

If bun.lockb is found, use the following command:

bun i zod@3.22.3

If yarn.lock is found, use the following command:

yarn add zod@3.22.3

If pnpm-lock.yaml is found, use the following command:

pnpm i zod@3.22.3

Then, a Zod schema can be defined alongside the component:

import {z} from 'zod';

export const MyCompositionSchema = z.object({
  title: z.string(),
});

const MyComponent: React.FC<z.infer<typeof MyCompositionSchema>> = () => {
  return (
    <div>
      <h1>{props.title}</h1>
    </div>
  );
};

In the root file, the schema can be passed to the composition:

import {Composition} from 'remotion';
import {MycComponent, MyCompositionSchema} from './MyComposition';

export const RemotionRoot = () => {
  return <Composition id="MyComposition" component={MyComponent} durationInFrames={100} fps={30} width={1080} height={1080} defaultProps={{title: 'Hello World'}} schema={MyCompositionSchema} />;
};

Now, the user can edit the parameter visually in the sidebar.

All schemas that are supported by Zod are supported by Remotion.

Remotion requires that the top-level type is a z.object(), because the collection of props of a React component is always an object.

Color picker

For adding a color picker, use zColor() from @remotion/zod-types.

If it is not installed, use the following command:

npx remotion add @remotion/zod-types # If project uses npm
bunx remotion add @remotion/zod-types # If project uses bun
yarn remotion add @remotion/zod-types # If project uses yarn
pnpm exec remotion add @remotion/zod-types # If project uses pnpm

Then import zColor from @remotion/zod-types:

import {zColor} from '@remotion/zod-types';

Then use it in the schema:

export const MyCompositionSchema = z.object({
  color: zColor(),
});