Expression
Motion
Motion is structural, not decorative. It guides attention, signals state, and never demands more than a glance.
Easing
Defaults to a single “out” cubic-bezier.
cubic-bezier(0.22, 1, 0.36, 1)Durations
Three tiers — never longer than 600ms.
- fast — 0.2s
- base — 0.35s
- slow — 0.6s
Distance
Travel stays small so layout never “jumps”.
- sm — 8px
- md — 16px
- lg — 32px
Live demos
Every demo respects prefers-reduced-motion.
Reveal · fadeUp
Generic in-view reveal. Swap the variant prop to use any preset.
Scroll into view to see this reveal.
TextReveal
Token-by-token entrance.
Stagger
Children animate in sequence.
1
2
3
4
5
6
7
8
Tilt
Hover to see the gentle 3D tilt response.
Hover me
Marquee
Continuous loop. Pauses on hover by default.
CinnabarDerbyInter TightInterfadeUpTextRevealCinnabarDerbyInter TightInterfadeUpTextReveal