镇馆 8（传播 / 首选）:
scroll-driven-shader·image-displacement·particle-transition·shader-wipe·split-text-reveal·horizontal-gallery·view-transitions·drag-spring
完整表见下；人类 README 精选表见 README.md。
给 AI/自动化用的单文件决策索引。人类请看 README.md。 每行:路径 | 名称 | 难度 | 一句话机制 | 适用场景。选中后读该 pattern 的 README(规格)+ demo.html(参考实现)。
| Pattern | 名称 | 难度 | 一句话机制 | 适用场景 |
|---|---|---|---|---|
| scroll/scroll-reveal | 滚动渐显 | ★ | IntersectionObserver 进视口加 class | 任何内容页入场,最保守的默认选择 |
| scroll/horizontal-gallery | 横向滚动画廊 | ★★ | sticky 容器把纵向滚动映射为横向位移 | 作品集、时间线、产品线陈列 |
| scroll/scroll-driven-shader | 滚动驱动 Shader | ★★★ | 滚动进度 → shader uniform | 3D 叙事站、WebGL 背景联动 |
| scroll/parallax-cards | 视差漂浮卡片 | ★ | 偏移 = 离视口中心距离 × (speed−1) | 漂浮卡片群、贴纸、装饰元素 |
| scroll/css-scroll-scrub | CSS 滚动擦洗 | ★ | CSS animation-timeline: scroll()/view(),零 JS | 进度条、可倒放的入场,渐进增强场景 |
| hover/image-swap | Hover 双图切换 | ★ | 双图预载 + opacity 切换 | 画廊/头像 hover,成本最低的惊喜 |
| text/svg-line-draw | SVG 线条绘制 | ★★ | stroke-dashoffset 从满到零 | logo 入场、签名、路径叙事 |
| text/stagger-grid | Stagger 网格波纹 | ★ | delay = 到波心距离 × 单位延迟 | 网格/列表的编排入场,波纹注意力 |
| text/split-text-reveal | 逐行/逐字拆分入场 | ★ | 拆 span + 索引延迟 + 行遮罩 | 大标题入场,获奖站标配,三站实测撞车 |
| text/scroll-marquee | 滚动响应字幕 | ★ | rAF 推进 + lerp 滚动速度反馈 | 品牌字幕带、章节分隔、logo 墙 |
| text/count-up | 数字滚动 | ★ | IntersectionObserver + rAF easeOut + Intl | 数据统计区,B 端性价比之王 |
| transitions/theme-shift | 章节主题突变 | ★ | 滚动触发 data 属性换 CSS 变量 | 长页分章换肤,低成本高感知 |
| transitions/view-transitions | View Transitions 过渡 | ★★ | startViewTransition + 同名共享元素 | 列表↔详情、SPA 路由转场 |
| transitions/menu-stagger-reveal | 全屏菜单 Stagger 展开 | ★ | clip-path 遮罩 + 菜单项索引延迟 | 任何站的导航,泛用性最高 |
| transitions/image-displacement | Displacement 图片过渡 | ★★★ | 程序化噪声定每像素切换时机 + 推 UV 变形 | 图片画廊的高级切换,液态质感 |
| transitions/shader-wipe | Shader 遮罩擦除过渡 | ★★★ | 全屏 quad 噪声阈值擦除,盖满换 DOM 再揭开 | 章节/路由切换的"物质感"转场,内容层无关 |
| transitions/particle-transition | GPU 粒子过渡 | ★★★ | 顶点着色器无状态粒子:格点+错峰爆发包络 | 图像/logo 的"技术力宣言"切换,记忆点效果 |
| hover/drag-spring | 可拖拽 + 弹簧回弹 | ★★ | 半隐式欧拉弹簧:v += -kx - cv,松手带初速 | 贴纸/卡片/浮动装饰,把装饰变玩具 |
| hover/floating-stickers | 漂浮贴纸物理 Hover | ★★ | 闲时正弦漂移 + 指针斥力 + 回家弹簧 | 装饰元素群的"空气感",营销页点睛 |
| scroll/scroll-snap-sections | 滚动分节锁定 | ★ | CSS scroll-snap mandatory + snap-stop always | 全屏叙事骨架,零 JS 的一站一停 |
| layout/section-narrative | 章节式滚动叙事 | ★ | 全屏分节 + 编号 + 进退导航 | 宣言页、发布页、故事型官网 |
| layout/sticky-stack | 粘性堆叠 | ★ | 每卡 sticky top:0,后者压前者 | 功能列表、服务介绍、案例翻牌 |
| layout/comment-heading | 注释风标题 | ★ | CSS counter + ::before 注释前缀 | 开发者/极客气质的章节标题 |
| loading/entry-preloader | 加载序章 | ★★ | 资源预载 + 进度 + Enter 门 | 重资产站开场,兼做声音手势解锁 |
| loading/ambient-sound-toggle | 氛围音开关 | ★★ | 手势解锁 AudioContext + 全局开关 | 体验型站的氛围音 |
| 3d-webgl/canvas-ambient-bg | Canvas 氛围背景 | ★★ | 渐变圆斑 + lighter 叠加 + 正弦漂移 | 任何站的氛围背景层,高级感地板价 |
| layout/blend-invert | 覆盖层自动反色 | ★ | mix-blend-mode:difference,白色层自动反相 | 固定 header/logo 压在明暗不定的内容上,零 JS |
| cursor/hide-and-follow | 区域内隐藏光标 + 跟随标签 | ★★ | 区域 cursor:none + rAF lerp 跟随元素 | 作品网格/画廊,把光标变成说明 UI |
| cursor/image-cursor | 图片光标 | ★ | cursor:url(data-URI) + 热点坐标,零 JS | 只想换图标形状,全库成本最低的自定义光标 |
| cursor/blend-dot | 反色光标点 | ★★ | 跟随点 + mix-blend-mode:difference | 深浅背景混排的站,光标永远可见 |
| cursor/cursor-trail | 光标拖尾 | ★★ | 链式 lerp:第 n 点追第 n−1 点 | 体验型站/作品集的纯装饰,B 端别用 |
| cursor/spotlight-mask | 光标手电筒 | ★★ | mask-image 径向渐变跟着光标挖洞 | hero 记忆点,光标本身成为内容的一部分 |
| cursor/image-follow | 光标跟随预览图 | ★★ | 共用一个图容器 lerp 跟随,倾斜角=滞后量 | 作品集/代理商的项目列表,文字排版保持克制 |
| layout/grain-overlay | 噪点颗粒层 | ★ | feTurbulence 生成噪声铺满,压到 .055 | 全站质感地板,"看起来贵"最短的一条路 |
| hover/goo-merge | 液态融合 | ★★ | 高斯模糊 + alpha 压回硬边,重叠处连成一体 | 展开菜单/加载点,打破 DOM 的方块感 |
| text/text-mask-media | 文字挖空露媒体 | ★★ | background-clip:text 或 mask 挖穿盖层 | 超大标题里流着视频/渐变,一屏立记忆点 |
| text/outline-type | 描边字 | ★ | -webkit-text-stroke + text-fill-color 过渡 | 超大空心标题,占位置但不抢注意力 |
| text/text-on-path | 文字沿路径 | ★★ | SVG textPath(静态)/ CSS offset-path(逐字动画) | 圆形徽章、弧线标题,跳出网页默认观感 |
| hover/flip-card | 卡片翻转 | ★★ | perspective 在祖先 + preserve-3d + backface | 列表保持克制,细节藏背面 |
| layout/duotone-blend | 双色调 | ★★ | 去色 + lighten 抬黑 + multiply 压白 | 把来源不一的图统进一套品牌色 |
| transitions/pixelate-transition | 像素化过渡 | ★★ | canvas 降采样 + 关插值放大,最低点换图 | 要"利落不互溶"的切换,中间帧不糊 |
| transitions/clip-shape-wipe | 形状擦除过渡 | ★ | clip-path/条纹错峰:盖住→换内容→揭开 | 章节/视图切换的零门槛擦除,shader-wipe 的 CSS 平替 |
| text/elastic-text | 弹性文字入场 | ★ | JS 采样弹簧曲线喂给 CSS linear() 缓动 | 活泼/年轻向标题入场,ease-out 之外的性格档 |
| 3d-webgl/confetti-burst | 纸屑爆发 | ★★ | canvas 粒子:重力+阻力+自旋,burst 后自停 | 成功/完成时刻的庆祝反馈,SaaS 标配 |
| hover/conic-border-spin | 旋转渐变描边 | ★ | @property 注册 + conic 起始角动画 | 主 CTA/卡片的"通电"描边,AI 产品站标配 |
| hover/sprite-preview | 精灵图 Hover 预览 | ★ | steps(N-1, jump-none) 步进 background-position | 画廊卡片的零 video 动图预览,4~12 帧甜区 |
| layout/fake-ui-demo | 假 UI 自演示 | ★★ | JS 状态机切累加类,编排全在 CSS | 产品落地页让界面自己演,替代录屏,体积≈0 |
| cursor/custom-cursor | 自定义光标 | ★★ | lerp 双层跟随 + data-cursor 委托状态机 | 品牌感光标,四态(点/放大/文字/媒体);触屏必须 no-op |
| hover/magnetic-button | 磁性按钮 | ★★ | 磁场偏移×强度 + 欧拉弹簧回位,文字二级视差 | "手感"类代表作,CTA/圆按钮;触屏 no-op |
| 场景 | 推荐组合 | 口径 |
|---|---|---|
| B 端 / 机构 / 金融 | comment-heading + count-up + css-scroll-scrub + theme-shift + canvas-ambient-bg | 克制;动效为信息服务,Hashgraph 是参照 |
| 作品集 / 个人站 | entry-preloader + split-text-reveal + menu-stagger-reveal + image-displacement + scroll-marquee | 仪式感;开场和菜单是两大记忆点 |
| 产品发布 / 营销长页 | section-narrative + theme-shift + sticky-stack + parallax-cards + count-up | 滚动叙事;Shopify Editions 是参照 |
| 电商 / 图片画廊 | image-swap + image-displacement + horizontal-gallery + parallax-cards | 图片即内容,动效只加在图上 |
| 3D / 体验型 | scroll-driven-shader + entry-preloader + ambient-sound-toggle + canvas-ambient-bg + shader-wipe | 重开场重氛围;Robin/Igloo 是参照 |
- 动画只碰 transform / opacity(clip-path、filter 谨慎)
prefers-reduced-motion必须降级到静态终态- hover 效果给触屏(点击)和键盘(
:focus-visible)等价物 - 声音必须用户手势解锁
- 强注意力效果(波纹/marquee/displacement)一页一次,别当壁纸
- 抄机制不抄样式:demo 的配色排版是占位,进项目要跟项目的设计体系走
- 旋钮收口(组合 ≥2 个效果时):时长/缓动一律走全站 CSS 变量(一套时长阶梯
--dur-s/m/l+ 一个缓动族--ease-*;项目已有动效 token 体系则并入它,不另起一套),禁止每个效果自带节奏;强度类参数(位移强度、噪声频率、stagger 相位等)提升到该效果文件顶部常量块并注释可调范围,不许埋在函数体里;全页一次prefers-reduced-motion判断,rAF 尽量共用一个调度
拆解了 10 个获奖站,按气质找参照:cases/ — Bruno Simon(游戏化)、Igloo(shader 叙事)、Lando Norris(品牌动效密度)、Hashgraph(克制的机构感)、Shopify Editions(发布页叙事)、Active Theory(上限参考)等,各篇末尾有"运行时实测"。