Agent Skills › nexu-io/motion-anything › fx-confetti

fx-confetti

GitHub

提供基于Canvas的五彩纸屑特效，用于演示文稿或发布视频中的高光时刻。遵循无障碍规范，支持减少动态偏好设置，仅限单次使用以避免干扰阅读。

recipes/slides/fx-confetti/SKILL.md nexu-io/motion-anything

Trigger Scenarios

需要在幻灯片标题页或章节过渡处添加庆祝动画为产品发布视频或网页英雄区域配置视觉强调效果

Install

npx skills add nexu-io/motion-anything --skill fx-confetti -g -y

More Options

Non-standard path

npx skills add https://github.com/nexu-io/motion-anything/tree/main/recipes/slides/fx-confetti -g -y

Use without installing

npx skills use nexu-io/motion-anything@fx-confetti

指定 Agent (Claude Code)

npx skills add nexu-io/motion-anything --skill fx-confetti -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": "https:\/\/github.com\/nexu-io\/open-design",
        "design_system": {
            "requires": false
        },
        "example_prompt": "Use fx-confetti as a section effect on a slide or hero: call HPX['confetti-cannon'](el) on a positioned dark\ncontainer; keep to one bold effect per screen, with a reduced-motion guard."
    },
    "name": "fx-confetti",
    "triggers": [
        "confetti",
        "彩纸庆祝"
    ],
    "description": "Confetti fires across the frame — for wins and reveals. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch\nvideos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.\n"
}

Confetti Cannon

Confetti fires across the frame — for wins and reveals. From Open Design's html-ppt fx pack (Apache-2.0). Part of motion-anything; obeys MOTION-SPEC.md.

When to use it

Title cards, section breaks, or hero moments in slides / launch videos.

When NOT to use it (restraint)

Web body content or anything needing focused reading. Never more than one bold effect at once.

How to apply

Copy confetti-cannon.js and _util.js and link them.
Add data-fx="confetti-cannon" to a positioned container; call HPX['confetti-cannon'](el) (guard prefers-reduced-motion).