Caption Highlight Pill
Titles & lower thirdsA spoken line with the figure that matters lifted onto a solid accent pill below it, landing a beat later
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 6 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Leadlead · string
The line above the pill, set in plain white. Empty gives you the pill on its own, the 'Link in the description' case.
now: Adobe offered to buy Figma for
- Pill *pill · string
The words on the accent pill. A figure or a short imperative; this is the thing you want remembered.
now: $20 Billion
- Positionposition · "lower" | "center" | "upper"
Where the block sits. `lower` clears a presenter's face and stays above the platform's own caption area.
now: lower
- Groundground · boolean
Paint the frame behind it. Turn it off to render with an alpha channel and lay the caption straight over your own footage.
now: true
- Scalescale · number
Overall size multiplier, for when the caption has to sit inside a busy frame.
now: 1
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: ledger
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A two-part caption: a plain white sentence, and under it the figure that matters set larger on a solid accent pill. The sentence arrives first and the pill wipes open left to right a beat later with a small settle, so the number is read separately from its own sentence rather than at the same time. The ground can be switched off so the whole thing renders with an alpha channel and drops over footage in any editor.
