Every animation knob the library exposes, in one hoverable page. Timing, triggers, leave behavior, custom variants, the MotionIconConfig provider, absoluteStrokeWidth, and reduced-motion handling — each as its own self-contained demo with the exact prop shown beneath it. Use it to verify behavior, compare presets, or copy a pattern into your app.
How long the draw takes, when it starts, and how segments are staggered. Hover each demo to play it.
defaultsduration=0.15duration=2.5delay=0.5stagger=0.4stagger=0easing=linearrepeat=InfinityEach icon decides when to play. Hover the icon, click it, scroll it into view, hover a parent button, or fire it imperatively via a ref.
trigger="hover"trigger="click"trigger="mount"trigger="in-view"trigger="parent-hover"trigger="manual"What happens when the pointer moves away mid-draw. Hover each icon, then leave before it finishes — complete plays out, snap jumps to the end, redraw restarts from blank.
onLeave="complete"onLeave="snap"onLeave="redraw"Every icon broadcasts data-motion-state=resting | drawing on its <svg>. Pair it with :hover and onLeave='complete' to keep host color pinned through the full draw — without it, the color releases the moment the cursor leaves while the stroke is still animating. Hover either cell, then move away before the draw finishes (duration is slowed to 2s here).
without data-motion-state rulehas-data-[motion-state=drawing]:text-primaryPick which animation plays. The default is the stroke draw; mode='signature' plays the icon's bespoke animation. Per-icon prop on top of trigger=hover.
mode="draw" (default)mode="signature"mode='signature' plays the icon's character animation — a heart beats, a bell rings, a loader spins forever. Icons without a registered signature silently fall back to mode='draw' (and warn once in dev).
heart — beatsbell — ringseye — blinksstar — twinklessun — slow rotateloader — infiniteEvery bell variant reuses the same shell + clapper physics (single source of truth) and layers a modifier-specific motion on top. Hover any cell to play. The reveal motion for the modifier (+, −, ✓, /, sound waves, dot) appears mid-ring after the bell starts swinging.
bellbell-plusbell-minusbell-checkbell-offbell-ringbell-dotSkip the default stroke-draw and supply your own Motion variants. Get scale, rotation, staggered keyframes — anything Motion supports.
pulsespinstaggered wiggleA context provider that sets defaults for every icon underneath. Per-icon props still win, so children can opt out of any inherited value.
inheritsinheritsduration=1.4 overrideOpt-in stroke scaling that matches lucide-react. Without it, strokes thicken at larger sizes; with it, they hold a constant visual weight.
size=24 stroke=2size=64 stroke=2size=64 absoluteRespect (or override) the user's prefers-reduced-motion setting. Toggle your OS preference and refresh to see system mode flip; always and never demos ignore the OS.
reducedMotion="system"reducedMotion="always"reducedMotion="never"