A superlative claim that re-sets itself word by word while a globe passes behind it, then grows and lights the word it was built for
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 · 7 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.
- Lead *lead · string
The opening line, which settles and then slides away to the left. Set it the way it is said, with no trailing punctuation: it is the first half of a sentence the claim below finishes.
now: The world’s most
- Words *words · array
The claim, one word per entry, in the order they arrive. Each costs 2.7 frames of stagger, so six words push the accent past the middle of the clip. Two to four reads best.
now: 4 items
- Accent *accent · number
Index into `words` of the word that grows, turns blue and gets the sparkles. This is the word the whole line exists to deliver, so it is normally the first or the last.
now: 0
- Accent grow *accentGrow · number
How much the accent word grows at the accent beat, on top of the size it was already set at. The reference measures 1.325, read off the word's ink width before and after. Below about 1.15 the growth reads as a rendering artefact rather than as emphasis.
now: 1.318
- Mark *mark · "globe" | "none"
The globe that rises behind the opening line and drops away as the claim starts. 'none' leaves the type alone, which is the right choice when the claim is not about reach or scale.
now: globe
- Sparkles *sparkles · number
Four-pointed sparkles popping around the accent word. The reference uses three. Zero keeps the growth and the colour and drops the twinkle.
now: 3
- Brand *brand · string
Brand token id, one of the keys of BRANDS. Written for the light brands; the globe takes the accent and the lit word takes accentAlt.
now: frost
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A near-white lavender frame with a line of dark display type across the middle and a big violet globe rising from below behind it. The opening line settles, then slides off to the left picking up speed, and the claim replaces it one word at a time, each word dropping in from above as a pale grey, darkening as it falls and overshooting its baseline before it settles. The globe drops away as the second word lands. The finished line rests, then its first word grows, turns blue behind a wipe that crosses it left to right, and sparkles pop around it while the line re-centres to make room. The whole line finally leaves to the right, accelerating the way the first one did.
