The showpiece
One set of dots, four shapes
Scroll: the section pins and the dots re-form for each reason. On phones it cycles, tap to choose.
A Claude Code skill
Motion thatexplains things.
Calm micro-animations you can ask for in plain words. Every pattern on this page ships with the skill and respects reduced motion.
Ordered points
Timeline fill + pop, with a highlighter on the key words.
01
Explain a changeA number updated, a filter applied.
02
Show orderHeadings first, then content.
03
Invite a tapThings you can try right here.
04
Show it's liveData that keeps updating.
Stagger on filter
Cards slide in 80ms apart, and again every time the list changes.
Auto-advance that yields
A progress line moves it on every 5s. Hover pauses it; the first click stops it for good.
CompareScreenerTrack
Results, live data, dials
Roll a total the user changed, tick live values, spring a needle.
Count / roll
Motion.count₹10,760
₹25 lakh in 10 years at 12%0.6s cubic ease-out, from the last value.
Live tick
Motion.tick Subscribed
2.83×
$228.53
Values lift and go green; prices flash their background. Digits never roll.
Spring needle
.m-needle1.1s spring. Felt, not just seen.
Small signs of life
Draw, typing, ticker, ripple and motifs. Slow loops, all off under reduced motion.
Draw a line
Typing
Ripple + Ken Burns
.m-rippleMarquee, only if it overflows
Motion.marqueeGala Precision · 2.83× · closes in 1dKRN Heat · 1.34× · closes in 3dTechEra · 0.52× · closes in 4dAster Grid · opens Fri
Motifs
.m-eq · .m-breathe