Auto Fit Title
A headline sized to the frame it is given, then assembled word by word.
SceneScenesAdvanced
auto-fit-title30fps · 960×540
Install
$ npx remotion-ui@latest add auto-fit-titleThe fit is measured before anything animates, then the words land one after another out of their own masks — a two-word title and a twelve-word title both fill the safe area and both land the same way.
maxFontSize and minFontSize bound the fit; the subtitle scales with the
result so the pair keeps its ratio at any length.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/auto-fit-title- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: title, subtitle, logoSrc, logoSize, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { AutoFitTitle } from "@/remotion/scenes/auto-fit-title";
<AutoFitTitle title="Headlines that always fit" subtitle="Any resolution" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | - | Headline, fitted to the safe area whatever its length. |
| subtitle | string | - | Subtitle; scales with the fitted headline. |
| logoSrc | string | - | Brand mark above the headline. |
| logoSize | number | - | Logo size in composition pixels. |
| maxFontSize | number | 128 | Ceiling for the fitted size, at a 1080-wide stage. |
| minFontSize | number | 34 | Floor for the fitted size. |
| accentColor | string | "#E8B86D" | Background glow colour. |
| theme | "dark" | "light" | "dark" | Surface palette. |
| speed | number | 1 | Animation speed multiplier. |