Loading motion...
Style / Kinetic Typography
Type is the interface. The variable font is the animation engine — weight is volume, width is breath, stagger is punctuation.
Anybody Variable
wght 100–900 · wdth 50–150
ease cubic-bezier(0.22,1,0.36,1)
#FF4D00
Motion is tone of voice, not decoration. While one element performs, everything else holds still — and nothing ever just fades.
A viewport gets one dominant motion. Letters stagger in, or the marquee rolls — never both at once.
Text rises from an overflow mask like an actor stepping from behind a curtain. A flat opacity fade is a forbidden move.
Animate wght and wdth axes instead of color and position. The letterforms themselves do the acting.
+ Mask rise
× Flat fade (forbidden)
Same words, same duration. The mask gives the letters somewhere to arrive from.
Anybody carries the whole page. Hierarchy comes from extreme contrast of size, weight and width — not from extra fonts.
Every move runs on cubic-bezier(0.22,1,0.36,1) — fast start, slow settle. Pick one per viewport and let it own the stage.
translateY(110%) → 0 · stagger 40ms · 0.9s expo-outThree voices only. The ink stage, the bone type, and a single signal orange that never becomes a surface.
No rounded corners, no drop shadows. Feedback is weight gain, fill wipes and baseline sweeps — all type, all transform.
Fill wipe primary / outline secondary / ghost
Sizes
Stagger under 50ms reads as one wave; past 100ms it becomes a typewriter. Duration past 1.2s drags — the style forbids it.
animation: kt-rise 0.9s cubic-bezier(0.22,1,0.36,1) both;
animation-delay: calc(var(--i) * 40ms);
font-variation-settings: "wght" 800;