Overview
The heart-burst like button replays a scale-pop on every click via element.animate() (Web Animations API). Each click cancels in-flight animations before kicking off the next one — otherwise rapid clicks stack easing curves and the bounce drifts. A particle variant adds radial dots that travel outward in evenly-spaced angles for an exuberant celebration feel.
When to use it
Reach for the heart burst on like buttons, follow toggles, favorite stars, anywhere a click toggles a binary state that deserves visual celebration. Skip it on toggles where the action is purely utility (mute, theme switch) — the burst feels excessive for non-celebratory toggles. Skip the particle variant on dense lists; six particles per click across many list items burns frame budget.
How it works
On click, walk element.getAnimations() and call cancel() on each in-flight animation before starting the next. The pop itself is a Web Animations API element.animate() call with a three-keyframe scale array (1 → 1.25 → 1) and an overshoot easing curve like cubic-bezier(.34,1.56,.64,1). The overshoot gives the bounce its character — a plain ease-out reads as lifeless. The particle variant spawns six absolutely-positioned dots in a sibling layer, each animated outward via translate(cos(angle) * radius, sin(angle) * radius) with a staggered easing for organic spread.
Production gotchas
Web Animations API support is solid in modern browsers but the getAnimations() filter is still gated behind a flag on older WebKit — gate the cancel-all call behind a feature detect. The cubic-bezier overshoot can push the heart visibly past adjacent layout if the parent container has tight overflow: hidden — either widen the container or clamp the peak scale. Particles spawned via appendChild need cleanup on animationend or the DOM grows unbounded under rapid clicking.
Accessibility
The button itself is a real <button> with aria-pressed reflecting like state; the bounce is decoration only. Under prefers-reduced-motion: reduce swap the pop for a brief color/fill change so the toggle still communicates state without scale motion. The particle variant should be suppressed entirely in reduced-motion mode — outward-radiating dots are exactly the kind of peripheral motion the user opted out of.
References
Implementation depth
Replayable bursts need a clean separation between button state and particles. aria-pressed belongs to the like button; the WAAPI or CSS particles are temporary confirmation that can be skipped.
Pointer origin improves feel but should not be required. Provide a centered fallback for keyboard activation, prevent particles from stealing focus, and reduce motion by showing the pressed state without the burst.