Kinetic Headline
Kinetic typeWords rise through a hard clipping mask, staggered, with an accent rule drawing in beneath
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 · 5 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.
- Headline *headline · string
The headline itself. Two to eight words reads best; longer wraps and loses impact.
now: Words, to videos
- Eyebroweyebrow · string
Small uppercase label above the headline. Omit for a cleaner card.
now: Motionstash
- Alignalign · "left" | "center"
Text alignment. 'left' suits 9:16 and dense copy.
now: center
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: slate
- Rulerule · boolean
Draw an accent rule under the headline.
now: true
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A hero headline where each word rises up through a hard-edged mask, staggered by a few frames, with a thin accent rule drawing in underneath after the last word lands.
