Remotion Rule: Calculate Metadata

What it is

The Calculate Metadata rule is part of the official Remotion Agent Skill for programmatic video creation in React. It teaches AI agents how to use the calculateMetadata API to dynamically set composition duration, dimensions, and props before rendering, based on external data like video files, API responses, or user input.

This rule targets developers using Remotion with AI coding agents (Claude Code, Cursor, Codex) who need compositions that adapt their properties based on runtime data.

How it saves time or tokens

Without calculateMetadata, you would hardcode duration and dimensions or write custom logic to fetch media metadata and pass it through multiple layers. The calculateMetadata API centralizes this in one async function attached to the Composition component. AI agents with this rule installed produce correct calculateMetadata implementations on the first attempt instead of generating incorrect patterns.

How to use

1. Install the Remotion skills:

npx skills add remotion-dev/skills

1. The rule activates automatically when working with calculateMetadata in a Remotion project.

1. Define calculateMetadata on a Composition:

import { CalculateMetadataFunction } from 'remotion';

const calculateMetadata: CalculateMetadataFunction<Props> = async ({
  props,
}) => {
  const duration = await getVideoDuration(props.videoSrc);
  return {
    durationInFrames: Math.ceil(duration * 30),
  };
};

Example

Setting composition duration based on a video file:

import { Composition, CalculateMetadataFunction } from 'remotion';

type Props = { videoSrc: string };

const calculateMetadata: CalculateMetadataFunction<Props> = async ({
  props,
}) => {
  const durationInSeconds = await getVideoDuration(props.videoSrc);
  return {
    durationInFrames: Math.ceil(durationInSeconds * 30),
    width: 1920,
    height: 1080,
  };
};

export const Root = () => (
  <Composition
    id='MyVideo'
    component={MyComponent}
    durationInFrames={300}
    fps={30}
    width={1920}
    height={1080}
    defaultProps={{ videoSrc: 'https://example.com/video.mp4' }}
    calculateMetadata={calculateMetadata}
  />
);

Related on TokRepo

• Featured workflows — discover more Remotion skills and video tools
• Coding tools — AI-assisted development tools

Common pitfalls

• The calculateMetadata function must return a plain object; returning a class instance or Promise-wrapped object causes silent failures
• Default values for durationInFrames, width, and height on the Composition component are still required even when calculateMetadata overrides them
• Async operations in calculateMetadata run during the render preparation phase; slow API calls delay the entire render pipeline