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.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
A celebratory particle burst for like / favorite / reaction buttons. Part of
motion-anything; obeys MOTION-SPEC.md.
like-burst.css and like-burst.js into the project.<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>
[data-like-burst], or call attachLikeBurst(el) manually.PARTICLE_COUNT / COLORS in like-burst.js (keep particle count modest — taste over spectacle).lb-pop keyframe (currently 420ms, ease-out). Burst spread: dist in spawnParticles.prefers-reduced-motion: particles are suppressed, a quiet color/scale cue remains.transform/opacity only; removes injected particle nodes after ~700ms.attachLikeBurst(ref.current) in useEffect; or port the click handler into your
component and keep the CSS as-is.まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Back In Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。
Back In Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。
Back In Right — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。
Back In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。
Back Out Down — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。
Back Out Left — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
日本語の概要は準備中です。原文の説明を表示しています。