Remotion Rule: Import Srt Captions

What it is

This is a Remotion skill rule for importing .srt (SubRip) subtitle files into Remotion video projects. It uses the @remotion/captions package to parse SRT files and convert them into timed caption data that can be rendered as text overlays in your video composition.

The rule is part of the official Remotion Agent Skill collection, designed for developers using AI coding assistants (Claude Code, Cursor, OpenAI Codex) to build React-based programmatic videos with subtitles.

How it saves time or tokens

Parsing SRT files manually requires handling timestamp formats, multi-line text, and sequence numbering. The @remotion/captions package handles all parsing details and returns structured caption data ready for rendering. Without this rule, an AI assistant might generate custom SRT parsers or suggest incompatible libraries. The rule ensures the assistant uses the official Remotion package directly.

How to use

1. Install the Remotion skills collection:

npx skills add remotion-dev/skills

1. Add the captions package to your project:

npx remotion add @remotion/captions

1. Import and parse an SRT file in your Remotion project.

Example

import { parseSrt } from '@remotion/captions';
import { useCurrentFrame, useVideoConfig } from 'remotion';
import fs from 'fs';

// In a Node.js script or getStaticProps
const srtContent = fs.readFileSync('subtitles.srt', 'utf-8');
const captions = parseSrt({ input: srtContent });

// In a Remotion component
export const SubtitleOverlay: React.FC<{ captions: Caption[] }> = ({ captions }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const currentTime = frame / fps;

  const activeCaption = captions.find(
    c => currentTime >= c.startMs / 1000 && currentTime <= c.endMs / 1000
  );

  if (!activeCaption) return null;
  return (
    <div style={{ position: 'absolute', bottom: 50, textAlign: 'center', width: '100%' }}>
      <span style={{ background: 'rgba(0,0,0,0.7)', color: 'white', padding: '4px 12px' }}>
        {activeCaption.text}
      </span>
    </div>
  );
};

Related on TokRepo

• AI Tools for Video — Video production and editing tools
• Featured Workflows — Top-rated skills and workflows

Common pitfalls

• SRT files must use UTF-8 encoding; files with other encodings (e.g., ISO-8859-1) will produce garbled characters. Convert to UTF-8 before parsing.
• The parseSrt function returns timestamps in milliseconds; convert to seconds (divide by 1000) when comparing with Remotion's frame-based timing.
• Large SRT files with hundreds of entries are fine for parsing but may need optimization for rendering; avoid re-searching the full array on every frame by pre-computing frame-to-caption mappings.