1实现原理 · 为什么它能做到

『自带可运行代码』型 skill：SKILL.md 内联三种技术（CSS 渐变关键帧/GLSL fragment shader(Three.js)/canvas 2D 粒子）的完整可运行实现，agent 拷贝进交付物即可用——能力来自代码内联而非外部服务。

skills/motion-background/SKILL.md

This skill is self-contained: every technique below ships its own runnable code — CSS, GLSL, and canvas — with no external dependencies beyond Three.js where a shader is involved.

设计规则说 'Default to CSS if a gradient suffices'——成本阶梯（CSS 免费 < canvas CPU < shader GPU）决定选型；代码块即资产。

无缝循环是硬技术点：CSS 靠首尾关键帧相同；canvas/JS 用 loop phase=(t%PERIOD)/PERIOD×2π 驱动 sin/cos，时间在周期末精确回卷；shader 把噪声滚动设计成噪声空间的闭合圆。

skills/motion-background/SKILL.md

Any motion built only from `sin`/`cos` of `phase` (or integer multiples) loops seamlessly.

reference 里 aurora 的 uPhase 绕圆 trick（vec2(cos(uPhase), sin(uPhase)) 在 2π 处回到原点）把『肉眼无接缝』做成确定性数学，而非碰运气。

性能与无障碍被写成代码级纪律：devicePixelRatio 封顶 2、O(n²) 连线在 >120 点改空间哈希、prefers-reduced-motion 静态帧降级、visibilitychange+IntersectionObserver 离屏/隐藏暂停。

skills/motion-background/SKILL.md

honor `prefers-reduced-motion`, and pause when offscreen or the tab is hidden.

SKILL.md 5 个核心技巧第 5 节与 reference 的 attachLifecycle 控制器把 running 开关统一；'render one static frame, then stop' 保证 reduced-motion 用户仍有静态背景。

交付契约=单文件 HTML：背景+前景文字样本+单一动画驱动+可确定性截帧的 ?t=N freeze harness 全部内联，打开即用。

skills/motion-background/SKILL.md

A motion background ships as **one `.html` file that opens directly in a browser** — markup, the background, and (for shader/canvas) Three.js or canvas JS from CDN, all inline.

freeze harness 用 URL ?t=N 参数把 CSS animation-delay/PlayState 或 shader uTime 钉在指定时刻，供 headless 截图做确定性验证。

自带验证闭环（verify loop）：仓库 scripts/ 提供 seek-shot.sh（npx playwright 截 ?t=N 帧）与 contact-sheet.sh（ffmpeg 拼 contact sheet），SKILL.md 要求 start/mid/end 三帧截图查 fidelity/artifacts/loop seam。

skills/motion-background/SKILL.md

**Packaged helper** (`scripts/`): `scripts/seek-shot.sh anim.html 0 1.5 3` freezes the `?t=N` harness and screenshots each moment; `scripts/contact-sheet.sh sheet.png frame-*.png` tiles them for one-glance review. See `scripts/README.md`.

这是本仓库最『工程化』的 skill：交付不靠目测，靠确定性截帧+拼图检查；scripts/ 在仓库根（repo 级共享资产，不在 skill 目录内）。

深度实现放 references/background-recipes.md：多 blob CSS mesh（blur+screen 混合）、带鼠标视差与真无缝 loop 的完整 aurora、网格优化+鼠标排斥的星座场、闭合路径噪声滚动、统一生命周期管理器。

skills/motion-background/SKILL.md

references/background-recipes.md — fuller drop-in implementations: a richer multi-blob CSS mesh with blur, the complete Three.js aurora shader with mouse parallax and a true seamless-loop time wrap

SKILL.md 给『够用版』，recipes 给『生产版』（含可导出函数与清理函数）；两级厚度设计。

2核心能力

01CSS mesh 渐变背景（零 JS、background-position 关键帧、无接缝循环、reduced-motion 关动画）

02GLSL aurora/噪声渐变 shader（Three.js 全屏 quad、fbm 值噪声、uTime 驱动）

03canvas 粒子星座（距离连线、边界反弹、O(n²)→空间哈希优化指导）

04确定性无缝循环：phase 回卷 + 周期函数驱动 + 整数噪声格滚动

05reduced-motion/离屏/隐藏页节能：静态帧降级 + IntersectionObserver/visibilitychange 暂停

06性能封顶：devicePixelRatio min(dpr,2)、粒子数按移动端缩减

07交付验证：单文件 HTML + ?t=N freeze harness + seek-shot/contact-sheet 截帧拼图闭环

08reference 生产级 recipes：视差 aurora、鼠标排斥星座、生命周期管理器、噪声流循环

3外部依赖

Kind	Dependency / Endpoint
package	three.js（交付 HTML 运行时依赖；仅 shader 路线，CDN 或 bundler 引入）
cli	npx playwright screenshot（验证闭环；seek-shot.sh 内部调用，首次运行自动拉取 Chromium）
cli	ffmpeg（contact-sheet.sh 依赖，本地拼图）
cli	仓库 scripts/seek-shot.sh、contact-sheet.sh（POSIX bash 本地工具）

4管控建议与判定依据

建议配套管控措施

面向 Agent

分级或逐次授权，建议在沙箱运行

面向管理者

审批流程、可回滚、全程审计

判定依据（文件路径与关键语句摘要）

scripts/: 执行本地脚本或命令: SKILL.md 指示 agent 运行仓库脚本：`scripts/seek-shot.sh anim.html <t...>`（内部 npx pla
网络端点: 声明外部网络访问: skill 执行路径本身无网络外发（截图目标是 file:// 本地 html）；playwright 首次运行可能下载 Chromium（seek-
本地工作目录: 文件读写与工件输出: 向工作目录写入交付物 bg.html（单文件输出契约）

审计说明： 。行为=本地读写+本地 CLI：agent 按其内联代码写出单文件 HTML（本地写入），并用仓库自带 bash 脚本（playwright 截本地 file://、ffmpeg 拼图）验证；无凭证读取、无主动网络外发、无破坏性操作。注意点：① 交付的 shader 页面打开时从 CDN 加载 three.js——供应链依赖落在用户浏览器侧，宜固定版本；② playwright 首次运行会拉 Chromium 浏览器二进制（一次性、本地）；③ 若仅单装 skill 目录而不含仓库根 scripts/，seek-shot/contact-sheet 引用悬空（安装方式需含整个 repo）。不满足黄色（无常规网络外发）与橙色特征。

5第二遍独立确认

[ok] 脚本引用真实性 — SKILL.md 引用的 scripts/seek-shot.sh、contact-sheet.sh、scripts/README.md 在仓库根存在；seek-shot.sh 输出 frame-<t>.png 与 SKILL.md 用法一致。
[ok] 『no external dependencies beyond Three.js』反查 — SKILL.md/recipes 未出现其他 import/外部 URL 请求（CDN 仅以文字提及 three.js）；CSS/canvas 路线零依赖属实。
[ok] 无凭证/无隐藏网络调用 — token/curl/exec 类扫描零命中；playwright 只访问 file:// 本地页；唯一网络相关=playwright 首跑下载 Chromium（一次性工具安装）与交付页打开时 CDN 加载。
[discrepancy] 打包粒度风险（scripts/ 不在 skill 目录） — skill 自述依赖的验证脚本位于仓库根 scripts/；若通过 skills.sh 只安装单个 skill 目录（不含 repo 根），scripts/ 引用与 .claude-plugin 打包关系悬空——从源码无法确认各安装方式的粒度，展示层应提示按整 repo/pack 安装。
[ok] 代码正确性抽查（无缝循环/暂停逻辑） — phase 回卷公式、首尾关键帧一致、uPhase=2π 圆环回原点、IntersectionObserver running 逻辑在 SKILL.md 与 recipes 中一致；未发现逻辑矛盾。

6结论

真正自包含：三种技术的可运行代码内联在 SKILL.md，agent 拷贝即用，不依赖任何生成服务

无缝循环做成确定性数学（phase 回卷/首尾一致/噪声圆环），而非碰运气

性能/无障碍/电池纪律代码级落实（dpr≤2、reduced-motion 静态帧、离屏暂停）

验证闭环工程化：?t=N freeze + playwright 截帧 + ffmpeg contact sheet，可 headless 复验

适合： 适合给落地页/登录页/空状态做『微妙循环动态背景』的 agent 或前端开发者：要 CSS/canvas/shader 三档可抄代码+验证流程；尤其适合要求 reduced-motion 与电池友好的生产站点。

不适合： 不适合需要外部服务生成背景素材的场景（纯本地代码路线）；不适合无浏览器/无 playwright 的纯后端环境跑完整验证（可只交付不验证）；不适合要复杂 3D 场景/模型背景的需求（本 skill 仅全屏 quad shader 与 2D 粒子）。

Install Agent-Ready

① Verified Mirror 2026-09-09

Option A · Direct DownloadDownload motion-background.tar.gz

sha256: 6e74dc92e650a613…

Option B · Copy Guide for Agent

install.json

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 3c129f769d.