MOTION HUB
网页动效合集 · 背景 / 深浅过渡 / 拉扯翻页 / 片头 / 小交互
原生 JavaScript（Vanilla JS）· Zero Dependencies · No Build · 23 个效果
在线演示 motion.lijunyu.com.cn · npm · 作者官网 lijunyu.com.cn
这是什么
做个人网站的时候，一个个“能动的小想法”被做了出来：会漂移的等高线、被鼠标推开的点阵、从点击处扩散的深浅切换、被扯长再拽走的翻页……Motion Hub 把它们收在一起，做成一个实验台：
- 左边是全部效果的名单，按分类编号；
- 右边的舞台全尺寸实时运行当前效果（固定浅色，不受页面深浅切换影响），没人操作时有一个“幽灵光标”自己演示，一动鼠标就交还给你；
- 下面是说明和用到的技术、参数面板（滑块调间距 / 速度 / 半径 / 时长，片头和乱码可以输入自己的文字，还能换强调色，舞台立刻按新参数重跑），以及“复制 Prompt + 代码”按钮。
效果一览
| 分类 | 数量 | 效果 |
|---|
| 背景 | 5 | 等高线 · 磁性点阵 · 安静点阵 · 风场 · 坐标网格 |
| 过渡 | 11 | 圆形揭开 · 墨水晕开 · 点阵扩散 · 百叶窗 · 斜切扫过 · 光圈快门 · 液面上涨 · 网点溶解 · 柔光圆 · 翻页 · 淡入淡出 |
| 翻页 | 1 | 拉扯翻页 |
| 片头 | 1 | 点阵拼字片头 |
| 交互 | 5 | 太阳月亮开关 · 边框高光卡片 · 乱码落定 · 跟随信息卡 · 校验链 |
作品
名单最下面的「作品」是整页的完整作品，同样在舞台里预览：
- 服务器监控地球（
globe/）：一颗按真实昼夜、真实星空转动的 WebGL 地球，各地来的访问画成飞向服务器的弧线；深空、水墨两种画法（键 1、2），可以回放某一天。原本是作者服务器的监控面板，这里换成了通用的站名（home、chat、blog、api……）和现场合成的演示数据，没有真实的站点和访问记录。页面由面板项目导出：前端打包后内联进 index.html，地图素材（Natural Earth、NASA Blue Marble / Black Marble、NOAA ETOPO1、Yale 亮星星表，均为公有领域）写在 assets.js，双击也能打开。“复制 Prompt + 代码”给的是一个带提示词的单文件（模块不压缩），要和 assets.js 放在同一个文件夹里运行。
几个有意思的实现
- 拉扯翻页：把要被扯走的那一页复制一份、横切成几十条，每条按离“抓点”的距离做指数衰减的竖向位移和拉伸，拼起来就是被拉长的样子。只做竖向——横向一缩放，同一个字跨几条时边缘就会错成台阶。
- 点阵扩散：三层 CSS 遮罩合成，
实心圆 ∪（网点 ∩ 前沿环），半径用 @property 注册后交给 Web Animations 补间。
- 片头是纯函数：画面完全由时间
t 决定，可以随时跳到结尾、重播、在任意尺寸重画最后一帧，最后一帧直接当首屏背景“定格”。
- 深浅过渡两套实现：舞台里叠两层小页面，用 WAAPI 做动画，任何尺寸都能跑；整页用 View Transitions（
MH.bindThemeToggle）。两者共用同一组形状函数。
在你的项目里用
在实验台里选中一个效果，在参数面板里调到满意，点 复制 Prompt + 代码。复制出来的是一个独立的 .html 文件，代码和提示词（Prompt）是一体的：
- 存下来双击就能运行，只包含这个效果本身和它用到的样式；
- 文件开头的注释就是写给 AI 的说明：效果长什么样、实现原理、可以调的参数、要注意的坑、代码结构；
- 带着你调好的参数：文件末尾的
mount(el, {…}) 里就是你在面板上调的值，打开就是你看到的样子。
<!--
「等高线」 · Motion Hub · MIT License
【怎么用】把整个文件交给 AI，再说一句你的技术栈和想要的调整……
【效果】【实现原理】【可以调的参数】【注意】【代码结构】
-->
<html> … 可以直接运行的代码 … </html>
把整个文件交给 Claude、ChatGPT、Cursor 等，说一句“改写成 React 组件，放在首屏当背景，颜色换成我的品牌色”，它就能按你的项目改。原理和踩过的坑都写在里面，比只给代码更容易改对。
颜色全部来自 CSS 变量 --paper / --ink / --dim / --rule / --accent，换成你自己的配色即可。
index.html 实验台（直接双击打开即可）
src/core.js 注册表 + 公共工具（噪声、缓动、画布宿主、幽灵光标）
src/effects.css 配色变量 + 各效果样式，按 @css 标记分段
src/hub.css 实验台版式
src/effects/ 一个效果一个文件（点阵和安静点阵共用 dots.js，11 种过渡共用 transitions.js）
src/prompts.js 每个效果的说明：效果、原理、参数、注意事项（复制代码时写进文件开头的注释）
src/sources.js 打包好的源码字符串（复制代码用，npm run sources 生成）
tools/smoke.mjs 冒烟测试
tools/build-sources.mjs 生成 src/sources.js
docs/ README 用图
globe/ 作品「服务器监控地球」（由 tc-console 导出，不要手改）
npm install # 只装测试用的 puppeteer-core
npm run smoke # 浅色、桌面尺寸
node tools/smoke.mjs --night --mobile
无头 Chrome 逐个打开全部效果，检查脚本错误、是否画出内容和帧率。需要本机安装 Chrome，路径不同时用环境变量 CHROME 指定。
- 背景、翻页、片头、小交互：近两年的 Chrome / Edge / Safari / Firefox。
- 遮罩类过渡依赖
@property（Firefox 128+），不支持时直接切换。
- 整页深浅切换依赖 View Transitions（Chrome / Edge 111+、Safari 18+），不支持时直接切换。
- 系统开启“减少动态效果”时，所有效果只显示静止画面。
作为 Agent Skill 使用
skills/motion-hub/ 是一个 Agent Skill：SKILL.md 是给 AI 的入口说明和全部效果的索引，effects/ 里是 23 个“Prompt + 代码”单文件（和实验台复制出来的一样，默认参数）。装好以后直接对 AI 说“给首页加一个等高线背景”“深浅切换换成点阵扩散”，它会自己挑效果、读原理、按你的技术栈改写。
用 skills 安装（需要 Node.js 18+），可以选装到哪些 Agent、装在项目里还是全局：
npx skills add lijunyu726/motion-hub -g # 装到用户级（所有项目可用），交互式选择 Agent
npx skills add lijunyu726/motion-hub -g -a claude-code -a codex -y # 直接全局装到指定 Agent
npx skills update # 以后更新
其他方式：npx motion-hub（npm 包，只装到 Claude Code，--project / --dir <路径> 改位置）；或下载 https://motion.lijunyu.com.cn/skill/motion-hub.zip 手动解压到 Agent 的 skills 目录。
装一次就行：Agent 每次使用时会先从 https://motion.lijunyu.com.cn/skill/motion-hub/index.json 取最新的效果目录，新加的效果直接在线下载，不用重新安装 Skill；连不上网时用 Skill 自带的副本。源码改动后用 npm run skill 重新生成（部署脚本会自动生成并打包）。
参与
欢迎提 Issue 和 Pull Request，步骤见 CONTRIBUTING.md。
许可证
MIT + Commons Clause：可以免费用在任何项目里，包括商业项目；但不能把这些效果本身拿去卖（例如打包成付费模板或组件库）。
