Spoken Sentence
Kinetic typeA sentence delivered line by line: words drop into place, lines fall, swing and slide into each other, one phrase is retyped into the next, and the last word is swapped for a serif
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 · 3 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.
- Beats *beats · array
The sentence, one line per beat, in the order it is spoken. Seven beats of 15 to 40 frames fill the clip; if the frames add up to more than the clip holds, every beat is shortened by the same factor.
now: 7 items
- Swapswap · object
The closing gesture: the last word of the last line rolls down and out while a different word rolls in from above to take its place, in the same colour. Omit to end on the last line as written.
now: object
- Brandbrand · string
Brand token id, one of the keys of BRANDS. 'sky' is the pale-blue palette this style is known for; the other light brands, paper, press and field, also suit it.
now: sky
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
Recreate this kinetic-type clip exactly: a pale blue screen, one line of bold lowercase type centred, and the sentence spoken line by line. 'who you are' builds a word at a time, each word dropping in from up and to the right. It falls away and 'what your company does' swings down from above, hanging a couple of degrees off level before it settles. That slides out left and 'to turn', then 'your vision', glide in from the right. 'into reality' at nearly double size falls under gravity onto 'your vision', which vanishes on impact, and the dot of the i lands late. The letters are then retyped into 'and instantly', keeping the shared 'in'. That slides out and 'making you look' builds, then 'professional' arrives in violet after a pause, and finally rolls out as a serif 'trustworthy' rolls in over it. Match every timing to the frame.
