Remotion Rule: Display Captions

What it is

This is a Remotion skill rule that teaches AI agents how to render captions in programmatic video. It implements TikTok-style paged captions with word-level highlighting that syncs to audio timing. The rule is part of the official Remotion Agent Skill for building video in React.

The skill targets developers and content creators using Remotion to produce short-form video (TikTok, YouTube Shorts, Reels) where synchronized captions are essential for engagement and accessibility.

How it saves time or tokens

Manually timing caption highlights frame-by-frame is tedious. This skill rule provides the pattern for automatic word-level synchronization based on subtitle timing data. An AI agent following this rule generates the caption component correctly on the first attempt, avoiding iterative debugging of timing issues.

How to use

1. Add this skill rule to your Claude Code or Remotion agent configuration.
2. Provide subtitle timing data (SRT or JSON format).
3. The agent generates a React component that renders highlighted captions.

// Caption component following the Remotion skill rule
import { useCurrentFrame, useVideoConfig } from 'remotion';

interface Word {
  text: string;
  startFrame: number;
  endFrame: number;
}

export const Caption: React.FC<{ words: Word[] }> = ({ words }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  return (
    <div style={{ position: 'absolute', bottom: 80, width: '100%', textAlign: 'center' }}>
      {words.map((word, i) => (
        <span
          key={i}
          style={{
            color: frame >= word.startFrame && frame <= word.endFrame
              ? '#FFD700' : '#FFFFFF',
            fontSize: 48,
            fontWeight: 'bold',
            textShadow: '2px 2px 4px rgba(0,0,0,0.8)',
          }}
        >
          {word.text}{' '}
        </span>
      ))}
    </div>
  );
};

Example

// Subtitle timing data for the Caption component
[
  {"text": "Welcome", "startFrame": 0, "endFrame": 15},
  {"text": "to", "startFrame": 16, "endFrame": 22},
  {"text": "our", "startFrame": 23, "endFrame": 30},
  {"text": "tutorial", "startFrame": 31, "endFrame": 50}
]

Related on TokRepo

• AI tools for video — Video production and editing tools
• AI tools for content — Content creation tools and workflows

Common pitfalls

• Word timing data must be frame-accurate. If your subtitle source uses seconds, convert to frames using the video's FPS (e.g., 30fps means 1 second = 30 frames).
• Page breaks in long captions need careful handling. Show 4-6 words per page maximum for readability on mobile screens.
• Font rendering differs across platforms. Test caption appearance in both the Remotion preview and the final rendered MP4.