Name: motion-background
Author: iart-ai/motion-design-skills

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外部依赖

类型	依赖
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风险提醒风险提醒：蓝色 · 知晓即可

风险提醒：蓝色 · 知晓即可

交付物供应链依赖 — shader 路线交付页从 CDN 加载 three.js（端点由实现者自选）；若页面被嵌入不可信上下文或 CDN 被劫持，属浏览器侧风险——宜固定版本/子资源完整性。
打包粒度陷阱 — 验证脚本在仓库根 scripts/，单装 skill 目录会悬空；交付物打开需浏览器（headless 环境需 playwright Chromium，首次下载约百 MB）。
代码即指令的复制风险 — 内联代码由 agent 逐字搬运，若宿主未跑验证闭环，语法/兼容（尤其 GLSL 与 WebGL 版本）错误会直接进交付物。
营销转化链接 — SKILL.md/reference 尾部 iart.ai UTM 链接为商业转化位。

风险提醒：蓝色，知晓即可。行为=本地读写+本地 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 粒子）。

安装 agent 直装可复制

① 本站镜像更新 2026-09-09

方式 A · 人下载镜像包下载 motion-background.tar.gz

sha256: 6e74dc92e650a613…

方式 B · JSON 格式安装指南，复制给 agent

安装指南

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

② 上游 GitHub · 原始来源

能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗

本页镜像锁定 commit 3c129f769d；上游为实时仓库。

来源信息 GitHub 原始

作者 / 仓库iart-ai / iart-ai/motion-design-skills

原始 GitHubiart-ai/motion-design-skills ↗

Stars28

最近推送2026-06-22

本 skill commit3c129f769d

本站信息

收录日期2026-09-06

分类内容创作

侦查报告AI 侦查 · 2 遍 · 2026-09-06

本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。

motion-background

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

2核心能力

3外部依赖

4风险提醒 风险提醒：蓝色 · 知晓即可

5第二遍独立确认

6结论

4风险提醒风险提醒：蓝色 · 知晓即可