Fancy Like Button | Svelte Motion

FIG-001/ GESTURE

fancy like button.

Press and hold the heart to spawn a stream of bursting hearts and circles. Each particle animates x / y / opacity with its own timing — many small motion components composed for one rich gesture.

Pointer + keyboard handling lives in a single Svelte action (likeInteraction) so the gesture surface stays accessible — pointerdown starts spawning, pointerup / pointercancel stop it, and Enter / Space mirror the same toggle for keyboard users.
Each burst pushes a heart and 15 circle entries into reactive $state arrays. Every motion entry animates from the button's centre to a random offset, then drops out of the array via a setTimeout cleanup once its animation has settled.
The transition prop accepts per-key objects — independent timings for x, y, and opacity let the particles drift sideways quickly, rise more slowly, and fade out last for the layered feel.

↩ all examples

pattern · press-hold-burst mode · live running source

category · gesture

sheet · sheet 01 / 01

⟳ to re-run