Agent Skills › nexu-io/motion-anything › like-burst

like-burst

GitHub

为点赞/收藏按钮添加庆祝性粒子爆发微交互，仅限用户触发，支持无障碍偏好设置，提供CSS/JS实现及React集成指南。

recipes/web/like-burst/SKILL.md nexu-io/motion-anything

Trigger Scenarios

需要为互动按钮添加视觉反馈前端UI增强与动效开发

Install

npx skills add nexu-io/motion-anything --skill like-burst -g -y

More Options

Non-standard path

npx skills add https://github.com/nexu-io/motion-anything/tree/main/recipes/web/like-burst -g -y

Use without installing

npx skills use nexu-io/motion-anything@like-burst

指定 Agent (Claude Code)

npx skills add nexu-io/motion-anything --skill like-burst -a claude-code -g -y

安装 repo 全部 skill

npx skills add nexu-io/motion-anything --all -g -y

预览 repo 内 skill

npx skills add nexu-io/motion-anything --list

SKILL.md

Frontmatter

{
    "od": {
        "mode": "prototype",
        "preview": {
            "type": "html"
        },
        "surface": "web",
        "category": "animation-motion",
        "platform": "desktop",
        "upstream": null,
        "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."
    },
    "name": "like-burst",
    "triggers": [
        "like animation",
        "reaction effect",
        "celebration burst",
        "delightful like",
        "点赞特效",
        "惊喜感"
    ],
    "description": "Add a celebratory particle burst to a like \/ favorite \/ reaction button. A delight\nmicro-interaction that fires on user tap only (never on load), bursts on the \"like\"\ntransition (not un-like), and ships a prefers-reduced-motion fallback. Use when a small,\nearned moment of positive feedback will feel good — and only one such moment per 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

Copy like-burst.css and like-burst.js into the project.

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>

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.