What is word-level captions?

Word-level captions

Also searched as: captions, animated subtitles, karaoke captions, word-by-word captions

Canonical Definition

Word-level captions are subtitles timed to individual words rather than full phrases, where each word dynamically scales, highlights, or enters at the exact millisecond it is spoken.

Duration

120ms - 250ms per word

Easing Curve

spring({ damping: 14, stiffness: 220 }) or cubic-bezier(0.16, 1, 0.3, 1)

Target FPS

30fps or 60fps

Safe Zones

Keep bottom 28% clear of UI buttons and top 15% clear of username bars in 9:16.

Word-level captions arose from speech-to-text models capable of producing word-level timestamps ({ text, start, end }). Rather than approximating a line over three seconds, video code can synchronize graphic changes to the vocal onset of every phoneme.

In short-form social video (9:16 vertical), captions function as primary retention drivers. Because over 70% of mobile feeds are browsed with sound muted, kinetic captions provide visual motion in the middle third of the screen, pulling the eye from word to word.

Kinetic Slams & Pop Animations

Punching words into view with instantaneous arrival and damped settle

A kinetic slam gives weight to key nouns and verbs. Rather than gently fading in, the word enters slightly oversized (scale 1.15 to 1.3) with high initial velocity and settles to 1.0 within 4 to 6 frames.

When combined with spring physics, the slam avoids mechanical harshness while preserving the percussive feel of spoken cadence.

Catalog Implementation/Caption Kinetic Slam

componentcaptionsInspect in catalog

164 lines of React

How this works: The active word scales down from 1.25x with a sharp spring ease, synchronizing impact with speech spikes.

Scale-down impact with instant onset
Automatic word line-wrapping in safe area
Zero latency between speech timestamp and frame reveal

KineticSlamWord.tsxtsx

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

export const KineticWord = ({ word, active }: { word: string; active: boolean }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const scale = active
    ? spring({ frame, fps, config: { damping: 14, stiffness: 220, mass: 0.8 }, from: 1.25, to: 1 })
    : 1;

  return (
    <span
      style={{
        transform: `scale(${scale})`,
        display: "inline-block",
        color: active ? "#38bdf8" : "#ffffff",
      }}
    >
      {word}
    </span>
  );
};

Karaoke Pill Highlights & Background Sweeps

Guiding the eye with continuous bounding boxes across multi-word lines

In continuous reading layouts, the entire phrase is visible in muted contrast while a luminous pill or high-contrast background sweeps behind the active word.

This technique prevents the jumpy visual noise of words appearing and disappearing rapidly, providing a stable visual anchor that guides comprehension.

Catalog Implementation/Pill Karaoke

componentcaptionsInspect in catalog

763 lines of React

How this works: A rounded accent pill smoothly interpolates horizontal position and width to wrap the current word.

Smooth spring interpolation between word bounding boxes
High contrast text inversion inside the pill
Maintains paragraph stability while speech progresses

Engineering Guidelines & Common Pitfalls

Best Practices (What to do)

Limit each caption line to 3-5 words maximum to maintain quick readability at phone distances.
Use high-contrast fills (white on black or yellow on dark blue) with subtle text dropshadows.
Reserve explosive animations (particle bursts, matrix decodes) for emphasized emotional beats.

Common Failure Modes (What to avoid)

Over-styling every single word: if every conjunction and preposition slams, visual hierarchy collapses.
Placing captions too low where TikTok/Instagram handle bars and captions cover them.
Unsynchronized audio offsets: even a 2-frame (66ms) delay between speech and highlight feels disconnected.