01 · segmented
Sliding pill
02 · toggle
Spring switch
off
03 · disclosure
Animated height
Animating grid-template-rows from 0fr to 1fr animates real height — no measuring, no max-height guesswork.
Only to toggle a class. The motion is entirely CSS, so it stays smooth at any content length.
Headers are real buttons; reduced-motion collapses the duration so it snaps without losing the open/closed state.
04 · tabs
Gliding underline
A single indicator slides between tabs — width and position both interpolate.
Specs panel. Each pane appears with the same translateY-6 fade.
Pricing panel. The underline matched this tab's exact width on the way here.
05 · like
Heart pop
06 · feedback
Copy → check
07 · entrance
Staggered reveal
- Each row waits its turn — delay = index × 70ms.
- The eye reads the list as a single gesture, not six.
- One transition, many transition-delays.
- Reduced motion flattens delay to zero, fades only.