Agent Skills
› nexu-io/motion-anything
› fx-gradient-blob
fx-gradient-blob
GitHub基于 Canvas 的柔和渐变光晕特效，适用于幻灯片标题或视频高光时刻。需复制 JS 文件并添加特定 data 属性调用。严格遵循无障碍规范，支持 prefers-reduced-motion，建议每屏仅使用一个以避免干扰阅读。
Trigger Scenarios
需要为幻灯片标题卡、章节过渡或英雄时刻添加温暖的环境光效时
制作发布视频中的视觉强调效果时
Install
npx skills add nexu-io/motion-anything --skill fx-gradient-blob -g -y
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-gradient-blob as a background effect on a slide or hero: call HPX['gradient-blob'](el) on a positioned dark\ncontainer; keep to one bold effect per screen, with a reduced-motion guard."
},
"name": "fx-gradient-blob",
"triggers": [
"gradient",
"渐变光斑"
],
"description": "Soft drifting gradient blobs — a warm ambient glow. 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"
}
Gradient Blob
Soft drifting gradient blobs — a warm ambient glow. 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
gradient-blob.jsand_util.jsand link them. - Add
data-fx="gradient-blob"to a positioned container; callHPX['gradient-blob'](el)(guard prefers-reduced-motion).
Accessibility & performance
- Guard with prefers-reduced-motion (don't start). Canvas-based; isolated compositing layer.
Version History
- b016900 Current 2026-07-11 17:06
