Overview
Compress the spacing slightly, release into a wider word, overshoot once, then settle. Hold the expanded word before a shorter return to its original spacing.
Build
- 01
Center a word in equal-width letter slots. Offset each letter relative to the word’s center.
- 02
Hold for 600ms, then compress spacing for 300ms.
- 03
Expand over 720ms with a quick release and a slow landing. Overshoot the final spacing by 10%.
- 04
Settle through a 2% correction, then hold the expanded word for 1.56s.
- 05
Add a small outward preparation, return to the original spacing, and rest before repeating.
Example source React / TSX
examples/kinetic-type-poster.tsx · Uses the catalog’s shared composition helpers.
Loading source…