Elements: Split timed captions element

[yuanran32]

Summary

Fixes #9826
This PR splits the existing timed captions Element into three standalone Elements:

• text/timed-captions-highlight
• text/timed-captions-scale
• text/timed-captions-background

Each caption style now has its own public component, Element metadata entry, documentation page, and installable source file instead of being selected through a shared mode prop.

Changes

• Removed the old combined timed-captions Element API.
• Added separate Elements for the highlight, scale, and background caption styles.
• Updated the Elements sidebar and Element definitions.
• Updated tests to cover the new timed captions Element slugs.
• Removed the hardcoded style.translate positioning from the default example.
• Centered the caption layer using CSS layout instead.

Tradeoffs

The three Elements intentionally keep their implementation self-contained instead of sharing local helper files. This adds some duplication, but keeps each Element independently installable from the Elements library without requiring extra local source dependencies.

Testing

• git diff --cached --check
• Static validation script for:
  • Element filesystem slugs matching element-definitions.ts
  • timed captions slugs being exactly the three new variants
  • no remaining old mode API markers
  • no remaining hardcoded translate: '109.5px -36px'
  • declared dependencies matching imports

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview	Aug 3, 2026 9:28am
remotion	Ready	Preview	Aug 3, 2026 9:28am

[pullfrog]

✅ No new issues found.

Reviewed changes — a clean split of the TimedCaptions element into three standalone Elements, each with its own component, schema, metadata, and docs page.

• Removed the combined text/timed-captions Element — old index.mdx deleted, old entry dropped from element-definitions.ts and elements-sidebars.ts.
• Added TimedCaptionsBackground — stripped the mode prop and removed the highlight-color and scale-animation branches; kept the pill-background layout and interpolate/spring animation for the sliding pill.
• Added TimedCaptionsHighlight — standalone variant with word-level color highlight only (no scale animation, no pill background).
• Added TimedCaptionsScale — standalone variant with word-level color change + spring/interpolate scale animation (getTokenScale), plus fps-aware fontSize that accounts for activeWordScale.
• Updated element definitions — three new entries with correct preview URLs, dependency lists, display names, and slugs.
• Updated tests — converted the single-element OG video metadata test into a full loop over all definitions; added a timed-caption-specific test that asserts exactly three slugs exist, verifies each has a production filesystem entry, and confirms no stale mode/TimedCaptionsMode/hardcoded translate markers remain.

All 123 element tests pass.

  ^{｜ View workflow run ｜ Using DeepSeek Pro (free via Pullfrog for OSS) (Claude Opus not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏}

[samohovets]

Thanks!