Remotion Rule: Subtitles

What it is

This Remotion rule defines how AI coding agents should generate subtitle and caption components in Remotion video projects. It is part of the official Remotion Agent Skill that teaches AI assistants the correct patterns for programmatic video creation in React.

The rule targets developers using AI code assistants (Claude Code, Cursor, etc.) to build Remotion video projects that include captions, subtitles, or text overlays.

How it saves time or tokens

Without this rule, AI agents often generate incorrect subtitle timing, wrong component APIs, or deprecated Remotion patterns. The rule provides exact API signatures, timing calculations, and styling patterns so the agent produces working code on the first attempt, avoiding trial-and-error iterations.

How to use

1. Add the Remotion subtitles rule to your project's AI configuration (e.g., .cursorrules or CLAUDE.md).
2. Ask your AI assistant to add subtitles to your Remotion composition.
3. The agent follows the rule to generate correct subtitle components with proper timing.

Example

import { useCurrentFrame, useVideoConfig, Sequence } from 'remotion';

const Subtitle: React.FC<{
  text: string;
  startFrame: number;
  durationInFrames: number;
}> = ({ text, startFrame, durationInFrames }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const opacity = Math.min(1, (frame - startFrame) / (fps * 0.3));

  return (
    <Sequence from={startFrame} durationInFrames={durationInFrames}>
      <div style={{
        position: 'absolute',
        bottom: 80,
        width: '100%',
        textAlign: 'center',
        fontSize: 48,
        color: 'white',
        textShadow: '2px 2px 4px rgba(0,0,0,0.8)',
        opacity,
      }}>
        {text}
      </div>
    </Sequence>
  );
};

Related on TokRepo

• AI Tools for Video -- video creation and editing tools for developers
• Featured Workflows -- discover popular developer tools and skills

Common pitfalls

• Subtitle timing must use frame numbers, not seconds. Convert seconds to frames using Math.round(seconds * fps).
• Always use the Sequence component for subtitle timing rather than conditional rendering based on frame count. Sequence handles cleanup and performance.
• Font loading in Remotion requires explicit registration. Do not assume system fonts are available in the render environment.