Easing tokens
The vocabulary behind every animation here. Play to feel how each curve accelerates, settles, and (for spring) overshoots.
Emphasized
Standard
Spring
Select a plan
A spring-driven indicator glides and settles with a subtle overshoot.
--spring · --dur-med
Confirm plan
The primary action morphs its shape and color into a confirmation — a container transform.
--ease-emphasized
Offer details
Tap the card. It expands in place, easing open its height while details rise in.
container transform
6-month plan
$34/mo
0% APR · Total $200 · Applies to individual items
Instant approval · 3% rewards back
Show APR
A toggle with a springy knob that stretches on press and overshoots into place.
--spring
Show APR
Load plans
Items enter on a stagger with emphasized-decelerate easing, guiding the eye down the list.
stagger · --ease-emphasized-decel
- 3-month · 0% APR
- 6-month · 0% APR
- 12-month · 9.9% APR
- 24-month · 14.9% APR
Fetching offers
An indeterminate indicator whose arc grows and shrinks as it spins — motion that feels alive.
looping · --ease-emphasized