like-burst

name	like-burst
description	Add a celebratory particle burst to a like / favorite / reaction button. A delight micro-interaction that fires on user tap only (never on load), bursts on the "like" transition (not un-like), and ships a prefers-reduced-motion fallback. Use when a small, earned moment of positive feedback will feel good — and only one such moment per screen.
triggers	["like animation","reaction effect","celebration burst","delightful like","点赞特效","惊喜感"]
od	{"mode":"prototype","surface":"web","platform":"desktop","category":"animation-motion","upstream":null,"preview":{"type":"html"},"design_system":{"requires":false},"example_prompt":"Use the like-burst recipe on the heart button in this page: pop the icon on toggle and\nemit a short particle burst on like only, with a prefers-reduced-motion fallback. Keep it\nto one celebratory moment on screen.\n"}

like-burst

A celebratory particle burst for like / favorite / reaction buttons. Part of motion-anything; obeys MOTION-SPEC.md.

When to use it

• Like / favorite / upvote / reaction buttons.
• A small, earned moment of positive feedback.

When NOT to use it (restraint)

• Destructive or neutral actions (delete, dismiss, close).
• When more than one burst could fire at once — one celebratory moment per screen.
• On load / autoplay. This must be user-triggered.

How to apply

1. Copy like-burst.css and like-burst.js into the project.
2. Link them, and mark the button:

   <link rel="stylesheet" href="like-burst.css" />
   <button class="like-btn" data-like-burst aria-pressed="false" aria-label="Like">♥</button>
   <script src="like-burst.js"></script>
   

3. It auto-attaches to any [data-like-burst], or call attachLikeBurst(el) manually.

Tuning

• PARTICLE_COUNT / COLORS in like-burst.js (keep particle count modest — taste over spectacle).
• Pop feel: the lb-pop keyframe (currently 420ms, ease-out). Burst spread: dist in spawnParticles.

Accessibility & performance

• Honors prefers-reduced-motion: particles are suppressed, a quiet color/scale cue remains.
• Animates transform/opacity only; removes injected particle nodes after ~700ms.

Framework notes

• React: call attachLikeBurst(ref.current) in useEffect; or port the click handler into your component and keep the CSS as-is.