Remotion Captioneer

Live Caption Demo

Auto-cycles through all 14 styles — click a style below to lock it

0:00 / 0:00 Word Highlight

Caption styles

Each style animates differently — click to preview in the player above

Speech-to-text

Six providers — choose your speed, accuracy, and privacy trade-off

Local

Whisper.cpp

Offline transcription on your machine.

Cloud

OpenAI Whisper

Production-grade accuracy.

Fast

Groq

Low-latency cloud inference.

Scale

Deepgram

Word-level timestamps at scale.

Speakers

AssemblyAI

Diarization and sentiment metadata.

Scribe

ElevenLabs

Word-level Scribe transcription via API.

import { createProvider } from 'remotion-captioneer'; // Or: npx captioneer process audio.mp3 --provider elevenlabs --model scribe_v2 const provider = createProvider('elevenlabs'); const captions = await provider.transcribe('audio.mp3', { model: 'scribe_v2', language: 'en', });

Presets

One config object — ready to render

import { presets } from 'remotion-captioneer'; import { applyPreset } from 'remotion-captioneer'; <AnimatedCaptions captions={captions} {...applyPreset('tiktok')} />

Export formats

From word-level timing to industry standard subtitle formats

SRT

Universal subtitle format

VTT

Web video text tracks

ASS

Advanced Substation Alpha

TXT

Plain text transcript

Word SRT

Word-level SRT timing

Word VTT

Word-level WebVTT

@remotion/captions

Official package compat

import { toSRT } from 'remotion-captioneer'; const srt = toSRT(captions); // Or: npx captioneer export captions.json --format srt

Audio sync

Frame-accurate hooks for reactive caption animation

import { useBeatPulse, useVolume, useEnergy } from 'remotion-captioneer'; const beat = useBeatPulse(); // 0→1 pulse on every beat const vol = useVolume(); // real-time volume 0→1 const energy = useEnergy(); // frequency band analysis const val = useTimelineValue([ // interpolate any value [0, 0], [0.5, 1], [1, 0] ]);

Templates

Data-driven video generation — define scenes, render automatically

import { buildTemplate, TemplateComposition } from 'remotion-captioneer'; const video = buildTemplate({ scenes: [ { type: 'intro', title: 'My Video', duration: 120 }, { type: 'caption', text: 'Hello World', style: 'karaoke' }, { type: 'caption', text: 'Animated!', style: 'bounce' }, { type: 'outro', text: 'Subscribe!', duration: 90 } ] }); // Use in Remotion composition <TemplateComposition template={video} />

Layouts

Position captions and elements perfectly

Container

Full-frame with safe area

Stack / Row

Vertical & horizontal flex

Grid / Columns

Responsive grid layouts

Center

Center anything easily

Positioned

Absolute positioning

Overlay

Layered overlays

GradientBg

Gradient backgrounds

FadeIn

Fade entrance animation

SlideUp

Slide entrance animation

Spacer blocks

Template scene spacing

Emoji reactions

60+ keyword→emoji mappings — zero config needed

import { autoGenerateReactions } from 'remotion-captioneer'; const captions = [{ text: "This is amazing!", start: 0, end: 2 }]; const reactions = autoGenerateReactions(captions); // → [{ emoji: "😍", frame: 0 }, { emoji: "🔥", frame: 15 }]

CLI

Everything from scaffolding to batch processing

Command	What it does
`npx captioneer init my-video`	Scaffold a new project
`npx captioneer process audio.mp3`	Transcribe with STT
`npx captioneer batch ./audio-dir`	Batch process files
`npx captioneer export caps.json -f srt`	Export captions
`npx captioneer translate caps.json -t es`	Translate captions (OpenAI)
`npx captioneer preview`	Live preview server
`npx captioneer presets`	List all presets
`npx captioneer providers`	List STT providers
`npx captioneer styles`	List caption styles
`npx captioneer demo`	Open Remotion Studio (all 14 styles)

Get Started

npx captioneer init my-video

Click to copy