# Fancy Like Button
> Heart button with animated particle burst on press and hold using Svelte Motion.
**Source:** [https://motion.svelte.page/examples/fancy-like-button](https://motion.svelte.page/examples/fancy-like-button)
**Markdown mirror:** [https://motion.svelte.page/examples/fancy-like-button.md](https://motion.svelte.page/examples/fancy-like-button.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: 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.
**Metadata:** tag: `GESTURE` | pattern: `press-hold-burst`
### Notes
- 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.
### Source
#### Default.svelte
Source file: [src/lib/examples/fancy-like-button/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/fancy-like-button/demos/Default.svelte)
```svelte
// gesture burst{isLiked ? 'liked' : 'idle'}
{#each hearts as heart (heart.id)}
❤️
{/each}
{#each circles as circle (circle.id)}
{/each}
press to toggle · hold streams the burstspring: 400