炫酷可抄 · 零依赖 demo · AI 会选型
把获奖站级网页动效拆成可复用 pattern：原理 README + 双击能跑的demo.html，并附 AI 选型索引与通用 Agent skill。
English · 在线 Demo · 样板间 Showcase · 完整索引 INDEX · 口味铁律 TASTE
Copy-paste web motion patterns with live demos.
Not another CodePen dump — curated patterns, taste rules, agent-ready INDEX.
| 你是… | 怎么用 |
|---|---|
| 前端 / 设计师 | 打开 Live demos → 点卡片全屏试玩 → 读 pattern README 抄结构 |
| 要整页参考 | 打开 Showcase（多 pattern 拼成的 landing） |
| 任意 Agent | 安装 skill（见下）→ 说「给这个 landing 加有质感的动效，贴合现有设计」 |
对外传播与选型时优先这 8 个；其余在下方完整目录。
| Pattern | 一句话 | 难度 | Demo |
|---|---|---|---|
| 滚动驱动 Shader | 滚动驱动 shader uniform，一眼「贵」 | ★★★ | demo |
| Displacement 图片过渡 | 位移图扭曲切换，高冲击作品集感 | ★★★ | demo |
| GPU 粒子过渡 | 粒子化状态切换，技术向吸睛 | ★★★ | demo |
| Shader 遮罩擦除 | 全屏 shader 擦除，章节/路由高级切换 | ★★★ | demo |
| Split Text 拆分入场 | 逐行/逐字入场，落地页刚需 | ★ | demo |
| 横向滚动画廊 | sticky + 横移映射，产品叙事常用 | ★★ | demo |
| View Transitions | 浏览器原生共享元素过渡 | ★★ | demo |
| 拖拽 + 弹簧回弹 | 物理弹簧手感，3 秒 GIF 成立 | ★★ | demo |
想看「拼装后的完整页」而不是散装效果 → Showcase 样板间
| 常见形态 | fxlab |
|---|---|
| 零散 snippet | 有分类、难度、场景、禁忌 的 pattern 条目 |
| 只有灵感截图 | 可运行 demo + 原理 + 实现要点 |
| 让 AI 乱加动效 | INDEX 选型 + TASTE 口味铁律，默认 2–4 个效果而不是堆 8 个 |
| 教程站绑定某一库 | demo 零依赖可开；上项目可再换成 GSAP 等 |
skills/fxlab/ 是一份标准 skill 包（SKILL.md + 仓库内 INDEX/TASTE）。不绑定某一家 Agent：只要你的工具支持 skill / 规则文件 / 可粘贴系统提示，都可以装。
# 通用：clone 后把 skills/fxlab 拷到该 Agent 的 skills 目录
# Claude Code 示例
cp -r skills/fxlab ~/.claude/skills/fxlab
# 或 degit（无需整仓）
npx --yes degit saime428/fxlab/skills/fxlab ~/.claude/skills/fxlabWindows (PowerShell，Claude Code 路径示例):
Copy-Item -Recurse skills\fxlab $env:USERPROFILE\.claude\skills\fxlab其他 Agent：把同一目录放到其文档要求的 skills / rules 位置；或直接让 Agent 读取仓库根的 INDEX.md + TASTE.md + skills/fxlab/SKILL.md。
新会话里说：
给这个 landing 加有质感的动效，贴合现有设计，不要堆满动画。
Agent 会读：
| 文件 | 用途 |
|---|---|
INDEX.md |
全量 pattern 一览 + 场景套餐 |
TASTE.md |
颜色 / 密度 / 缓动等「用户没说也要遵守」的口味 |
各 pattern README.md |
原理与实现要点 |
skills/fxlab/SKILL.md |
选型流程（新建页 vs 存量站改造） |
远程直读（无本地 clone 时）：
- https://raw.githubusercontent.com/saime428/fxlab/main/INDEX.md
- https://raw.githubusercontent.com/saime428/fxlab/main/TASTE.md
两个维度沉淀，互相交叉引用：
cases/按网站：拆解好站用了哪些效果、为什么好看，并链到 patternpatterns/按效果：核心资产；每条 =README.md+demo.html
工作流：发现好站 → cases/ 拆解 → 值得复用的抽到 patterns/ → 双向链接。
存量站只加动效、不推翻设计：见 skill 里的 模式 B，以及 retrofits/。
| 分类 | 目录 | 说明 |
|---|---|---|
| 页面切换 | patterns/transitions/ |
路由过渡、View Transitions、遮罩擦除 |
| 滚动动效 | patterns/scroll/ |
滚动驱动、视差、pin/scrub |
| 悬停交互 | patterns/hover/ |
磁性按钮、拖拽弹簧、贴纸 |
| 文字动效 | patterns/text/ |
拆分入场、跑马灯、数字滚动 |
| 3D / WebGL | patterns/3d-webgl/ |
Canvas 氛围、粒子、confetti |
| 鼠标跟随 | patterns/cursor/ |
自定义光标、拖尾、手电筒 |
| 加载动画 | patterns/loading/ |
序章、氛围音 |
| 布局手法 | patterns/layout/ |
粘性堆叠、章节叙事、噪点层 |
判断标准见 docs/taxonomy.md。
AI 友好的单文件总表（含场景套餐）：INDEX.md。
| 网站 | 亮点 | 开源 | 拆解 |
|---|---|---|---|
| Bruno Simon 2019 | 物理小车探索式导航 | ✅ 源码 | 拆解 |
| Igloo Inc. | 滚动雕刻冰晶,shader 驱动 UI | 官方 case study | 拆解 |
| Messenger | 5.7MB 多人小星球游戏 | — | 拆解 |
| Lando Norris | Webflow+Rive+GSAP 拿 SOTM | — | 拆解 |
| Anime.js | 文档即演示,stagger 网格 | ✅ 源码 | 拆解 |
| Robin Payot | 滚动=3D 镜头推进 | — | 拆解 |
| Active Theory | 自研引擎全 canvas UI | — | 拆解 |
| Shopify Editions W26 | 发布说明做成滚动叙事 | — | 拆解 |
| Hashgraph Ventures | 章节宣言叙事+氛围音 | — | 拆解 |
| infinite imaginations | TweenMax 时代考古 | ✅ 源码 | 拆解 |
| MotionPotion | 纯 CSS 交互动效密度天花板,假 UI 自演示 | — | 拆解 |
| Cuberto | 光标状态机、商业原型 | — | 拆解 |
| Dennis Snellenberg | 磁性按钮极致,SOTD「节制」样本 | — | 拆解 |
欢迎 PR 新 pattern、修 demo、补「实战笔记」。流程与模板见 CONTRIBUTING.md。
- 网站拆解模板：
docs/templates/case-analysis.md - 效果条目模板：
docs/templates/pattern.md - 收录标准：
docs/criteria.md
传播物料与 social 图：docs/promo/。
- 效果条目要说清「为什么好看」（设计意图），不只「怎么做」。
- Demo 零依赖、单文件双击可开；确需库时在文档注明版本。
- 标注：性能注意点、可访问性（含
prefers-reduced-motion）、移动端。
Live demos · Showcase · GitHub