Kinetic type.
Shift two words off their common baseline to try a different setting for a specimen title. The phrase stays readable throughout.
In print
Both words on one baseline
- Resting states
- Both words on one baseline → Words on staggered baselines
- Reduced motion
- Both words move directly to their selected baselines.
Implementation excerpt
.words span { transition: transform 180ms ease-out; }
[data-on="true"] .words span:last-child { transform: translateY(8px); }Where Unvibed uses it
This public print-desk example is the site’s demonstration of kinetic type.