workbuddy_skills/oil-motion/references/motion-patterns.md

# 网页动效参考模式

## 目录

- [使用方法](#使用方法)
- [按表达目的选方向](#按表达目的选方向)
- [模式卡](#模式卡)
- [把模式编成可验收的方向](#把模式编成可验收的方向)
- [参考采纳门槛](#参考采纳门槛)

## 使用方法

这些模式提供创意参照，不是必须使用的风格或已经交付的运行时能力。只读与当前表达目的相关的两三张卡。

参考资料分为三类证据：**交互实测**指操作过公开页面；**预览观察**指观看过展示录像；**页面说明**指作者或策展页面的描述。录像里的指针、滚动条和按钮不等于能操作的真实页面。案例会更新，复用前重新核对链接与版本；实现建议是模式转译，不代表原站源码。

先分清动作发生在哪一层：

| 层 | 回答的问题 | 生产方式 |
| --- | --- | --- |
| 素材语义 | 身体、结构、材质、遮挡或场景实际发生什么变化？ | 需要生成时，沿现有关键帧、Pilot、媒体预算与时间轴流程执行 |
| 容器编排 | 哪张图成为焦点，窗口怎样放大，文字何时让位？ | 程序控制位移、比例、透视、遮罩和层级；不为这些动作额外生成视频 |
| UI 状态 | 选中了什么，操作处在哪一步，用户能否取消？ | 程序维护真实状态、文本、焦点与事件；动画表现状态，不替代状态 |

只涉及后两层的方向交给普通前端实现，不进入本 Skill 的生图、生视频或 `motion_budget.py`。混合方案只让语义素材进入媒体流水线；没有新增 `delivery.selected` 或控制器枚举。二维模拟、实时三维和语音处理也不能因为有参考案例就宣称现有素材控制器已支持。

## 按表达目的选方向

| 主要目的 | 优先模式 | 主要驱动 | 成本来源 |
| --- | --- | --- | --- |
| 解释同一产品的不同能力 | 01 材质章节、02 表面进入内部 | scroll / state | 关键帧连续性与产品保真 |
| 把注意力交给一个对象 | 03 小窗扩展、04 多图汇聚、06 透视归正 | scroll | DOM 编排、媒体加载 |
| 把零散内容组织成关系 | 05 散点成序、09 关系星图 | scroll / state | 稳定对象标识与阅读顺序 |
| 鼓励主动探索 | 07 贴纸舞台、08 就地预览、12 内容空间 | pointer / drag | 命中、遮挡与移动端替代 |
| 展示多个可比较的选择 | 10 压缩展开 | state / touch | 可读布局与键盘焦点 |
| 让过程和累计变化可感知 | 11 语音状态体、13 使用痕迹 | audio / data / state | 真实数据和状态反馈 |
| 让模式切换具有连续性 | 14 图标共享形态 | state | 语义清晰与精确几何 |

## 模式卡

### 01 同一产品，材质与场景按章节变化

- **参考**：[MotionSites / Cordex](https://motionsites.ai/?prompt=cordex)，预览观察：同一条管状产品以大比例展示，编织材质、应用场景和参数卡发生切换。
- **转译**：把“多个卖点”变成同一对象的多种可见状态，例如外壳保护、内部结构、不同环境适配。机位、主轴和产品轮廓是视觉锚点。
- **输入与状态**：有因果顺序的章节可用 `scroll + scrub + linear`；独立型号选择属于 `state + discrete`，不能假设任意两个型号都有连续视频过渡。
- **制作分工**：AI 素材承担材质、结构和环境变化；型号、参数和选项用 DOM。纯换色能准确计算时直接用程序或真实三维。
- **验收重点**：停在中间也看得懂；参数只随已确认状态切换；反向滚动不把 A 型号说明留在 B 型号画面上。触屏提供章节入口，静态替代展示产品与相应参数。

### 02 从表面进入内部，再回到可解释的整体

- **参考**：[MotionSites / Alethia](https://motionsites.ai/?prompt=alethia)，预览观察：岩石状主体及蓝色表面结构在近景、整体与不同构图间变化。
- **转译**：借鉴“整体—细节”的尺度关系，不复制岩石皮肤。可用于材料孔隙、产品内部或概念系统；真实结构需要原始资料约束。
- **输入与状态**：有起止的推进用 `scroll + scrub + linear`。自由观察或任意绕行则需要二维/三维表示，不能伪装成一条视频。
- **制作分工**：先选始终可辨认的纹理或部件作锚点；生成整体、过渡入口、内部三个关键状态；精确标签由程序跟随已标定位置。
- **验收重点**：微观细节与原对象有可解释的关系，回退能找回原位置；新内容出现前给出阅读空间。移动端可以缩短路径并直接展示局部放大图。

### 03 小窗口扩展成主舞台

- **参考**：[21st / Scroll media expansion hero](https://21st.dev/@arunachalam/components/scroll-expansion-hero)、[Hero Scroll Video Pin Reveal](https://21st.dev/@ajith66310/components/hero-scroll-video-pin-reveal)，公开预览与页面说明。
- **转译**：先让人认出对象，再让媒体窗口扩展，正文随后出现。适合产品演示、案例影片和局部特写进入全景。
- **输入与状态**：窗口尺寸跟随局部滚动；窗口里的视频可以独立按时间播放，也可以另有随动时间轴，两者分别定义。
- **制作分工**：窗口、圆角、文字位移与遮罩由程序处理；已有图像或视频通常足够。镜头真正穿越物体时才进入语义素材生成。
- **验收重点**：扩展前后主体裁切可接受；文字让出焦点；结束后自然接回正文；反向操作恢复原窗口。减少动态效果时直接给最终窗口与正文。

### 04 多图换位，汇聚成一个焦点

- **参考**：[21st / Scroll Choreography](https://21st.dev/@componentry/components/scroll-choreography)，交互实测：四图随滚动改变位置，最后一图覆盖视口，回滚恢复多图布局。
- **转译**：用多个输入汇聚为一个结果，或从候选案例中突出一个主案例。图像的身份连续比路径炫技更重要。
- **输入与状态**：局部 `scroll` 控制“展开—换位—汇聚—突出”；版式有二维坐标，不意味着需要二维视频采样。
- **制作分工**：使用独立图片与 DOM 变换，保留稳定对象标识；最终焦点可接入一段生成的语义动作。
- **验收重点**：突出的是哪张图始终明确；回滚回到各自原位；源图足够清晰；小屏减少同时出现的图数。不要把所有图与文字烘焙进一段视频。

### 05 散点成序：散开、围合、展开为可读路径

- **参考**：[21st / Scroll Morph Hero](https://21st.dev/@prashantsom75/components/scroll-morph-hero)，页面说明：散乱布局变成圆形，再形成滚动驱动的弧形排列。
- **转译**：表现收集、归纳与组织，把原本零散的信息排成有意义的顺序。圆形只是中间构图，不是目的。
- **输入与状态**：可用进入时的一次聚合，加滚动控制的排列变化；先交代自动段何时交还控制权，避免一开始滚动却等动画播完。
- **制作分工**：坐标、角度、缩放、透明度由程序生成；保持每个对象的身份与最终读序。无需为规则排列调用视频模型。
- **验收重点**：聚合后的组织关系比起点更清楚；对象不突然替换；自动引入可跳过；小屏直接呈现有序列表。

### 06 透视陈列归正为可阅读界面

- **参考**：[21st / Container Scroll Animation](https://21st.dev/@manuarora700/components/container-scroll-animation)，页面说明与使用代码：滚动改变容器的三维朝向，内容可是一张界面截图。
- **转译**：开场展示产品的形象，继续浏览时把界面转正，交给用户阅读。适合桌面软件、控制台或设计工具介绍。
- **输入与状态**：局部滚动控制有限角度的透视与比例；这不是产品全周自转，也不是头部注视。
- **制作分工**：CSS 透视和 DOM 变换；界面截图或真实 UI 保持准确。只有设备开合、连接或接触关系真的变化时才增加语义素材。
- **验收重点**：最终正视状态足够长且足够清晰；文字不能永远倾斜；触屏直接展示正视界面，保证后续操作区域的命中正确。

### 07 贴纸舞台与可探索的边缘区域

- **参考**：[MotionSites / Orbit Stickers](https://motionsites.ai/?prompt=orbit-stickers)，预览观察：太空主题贴纸从页脚边缘进入、层叠并改变位置，链接区保持留白。
- **转译**：把品牌资产做成可挑选、可拖动的小物件，用于页脚、空状态或轻量入门。借鉴层次与探索感，不默认继承太空主题。
- **输入与状态**：整片贴纸拖动适合 `drag` 的二维坐标；点击让某个角色发生短语义动作时，角色内部可单独用 `segment-play`。
- **制作分工**：透明静态贴纸配程序变换；只有角色肢体或真实材质发生变化时才生成对应动作。需要碰撞时另外实现物理模拟。
- **验收重点**：装饰不遮挡链接和焦点；拖动能取消、复位；触屏不会把正常页面滚动误当拖拽；静态贴纸组合仍成立。录像没有证明原站物理引擎的存在。

### 08 在探索位置给出预览或光照反馈

- **参考**：[21st / Hover Preview](https://21st.dev/@minhxthanh/components/hover-preview) 的页面说明为文字链接悬停预览；[Spotlight Card](https://21st.dev/@jahed/components/spotlight-card) 提供指针相关视觉反馈的公开演示。
- **转译**：列表保持紧凑，用户关注某项时才显示局部图像；高光用于指出可操作区域或当前观察位置。
- **输入与状态**：指针位置是二维数据，选中的条目是离散状态。不要把二者强行塞进同一个视频进度。
- **制作分工**：预览图、遮罩、高光和避让由程序控制；可搭配已生成的短素材，但不能让浮层接管链接本身的输入。
- **验收重点**：靠近屏幕边缘时不越界；键盘聚焦与触屏点击也能看到同等信息；纯装饰高光关闭后功能完整。

### 09 关系星图：用选择揭示关联

- **参考**：[21st / Radial Orbital Timeline](https://21st.dev/@jatin-yadav05/components/radial-orbital-timeline)，交互实测：选中节点显示状态、说明和关联节点入口，点击关联项能切换详情。
- **转译**：将系统能力、流程阶段或生态连接显性化。轨道布置承担空间组织，选择状态承担信息揭示。
- **输入与状态**：选择节点属于 `state + discrete`；即使节点沿圆周排布，也不能据此设置素材 `parameter_space: circular`。
- **制作分工**：数据节点、连线、标签和焦点由程序维护；中心的品牌物体可独立使用生成素材。真实流程状态来自业务数据。
- **验收重点**：选择后对象易追踪，详情不会随自动公转逃走；关系可被文字或列表表达；小屏有顺序明确的节点列表。不要照搬演示中的随机能量数值。

### 10 压缩邻项，展开当前选择

- **参考**：[21st / Squeeze Carousel](https://21st.dev/@yura/components/carousel-squeeze)，页面说明与使用代码：一项宽幅展示，其他项收为细条；演示配置关闭自动轮播。
- **转译**：在有限空间里保留“还有哪些选项”的空间线索，同时集中展示当前产品或案例。
- **输入与状态**：点击、触屏或键盘选择离散项；布局动画跟随所选项，不让自动轮播擅自改变正在阅读的内容。
- **制作分工**：DOM 布局与裁切；只有当前项需要动态展示时才加载素材。主体定位按每张图片单独设定。
- **验收重点**：压缩后仍可识别和选择；焦点不因宽度变化丢失；小屏用可读标签或列表替代极细点击条；减少动态效果时直接换布局。

### 11 语音状态体：把真实输入转成反馈

- **参考**：[21st / Voice Powered Orb](https://21st.dev/@isaiahbjork/components/voice-powered-orb)，作者说明与使用代码：WebGL 球体按音频强度改变视觉表现；真实麦克风链路需另行验证。
- **转译**：为语音助手区分空闲、聆听、处理中、输出和错误。音量只能表达输入活动，不能冒充任务完成进度。
- **输入与状态**：业务状态决定模式，音频包络影响有限的强度参数。拒绝授权、静音和断流都必须有明确状态。
- **制作分工**：信号处理、颜色、强度或 shader 由程序执行；生成素材仅用于有意义的形体状态，不尝试预烘焙任意频谱。
- **验收重点**：无声音时不假装收到输入；用户启动后才请求麦克风；停止后结束采集；文本状态在无动画时依然可读。参考组件存在不等于已支持整条语音链路。

### 12 把内容集合变成空间，再回到具体任务

- **参考**：[Cosmos 官网](https://www.cosmos.so/)，当前页面观察：图片围绕首屏文案分布，后续章节介绍集合、颜色搜索、相似图与来源信息；[Godly 历史收录](https://godly.website/website/cosmos-978) 仅作出处线索。
- **转译**：用内容对象本身建立空间感，然后让它们服务于搜索、归类或溯源。适合素材库、知识库和研究工具。
- **输入与状态**：首屏可有轻量自动运动；关键交互使用真实搜索或明确标为演示的输入。滚动负责章节揭示，不能伪造真实搜索结果。
- **制作分工**：图片卡与 UI 用程序；可把一张选中的图接入语义动画，但不需要把整个内容库做成视频。
- **验收重点**：标题、搜索与 CTA 保持稳定；背景卡片不抢焦点；产品能力在静态页面中也说得清。历史收录和现行官网不是同一版本证据。

### 13 使用痕迹：累计行为变成可见材质

- **参考**：[Recent / Aging Button](https://recent.design/i/a06z03e-aging-button-microinteraction)，策展说明与预览：按钮随着点击次数增加出现磨损和脏污。
- **转译**：把次数、使用历程或里程碑变成对象状态，例如徽章抛光、工具磨损或植物成长；只用于变化具有产品意义的地方。
- **输入与状态**：输入是累计数据，状态映射必须可复现；不是“等待越久随机变脏”。跨次访问是否保留由业务需求决定。
- **制作分工**：简单纹理混合用程序；复杂生长或老化可生成少量明确关键状态与相邻转场。数值、历史与重置由程序管理。
- **验收重点**：磨损不影响按钮文字和可用性，不使人误以为损坏或禁用；清楚区分“保存成功”与“累计变化”。普通高频操作不必每次演出。

### 14 共享几何形态，让状态切换有来有去

- **参考**：[Recent / 3-in-1 Icon Morph](https://recent.design/i/t36wysw-3-in-1-icon-morph)，预览观察：多个状态图形的线、点和轮廓重组成一个符号；策展账号标签不视为原作者证明。
- **转译**：为展开/收起、组合/拆开或模式切换保留共同几何锚点，让用户看出新状态从何而来。
- **输入与状态**：业务事件选择目标状态；快速反向应从当前几何状态继续，不先跳回起点重播。
- **制作分工**：SVG 或 DOM 精确控制线段、点和遮罩；功能图标与文字不交给视频模型绘制。语义完全不同的状态可以直接替换，不强求变形。
- **验收重点**：最终符号没有丢失必要状态信息；读屏名称同步更新；缩小后仍清晰；减少动态效果时直接切换到最终符号。

## 把模式编成可验收的方向

方向卡的格式以 [concepts.md](concepts.md) 的“方向卡”为准，最多提出三个方向。借用本库的模式时，在卡上补一项“参考与证据”：案例链接、实际看到的现象，以及哪些只是建议或推测。

把节奏写进 Brief 现有的 `storyboard` 与 `rest_state`；运行时规则仍以 [runtime.md](runtime.md) 为准。不要从参考卡增加一套重复的合同、时间轴或预算字段。

## 参考采纳门槛

- 先认出对象，再发生变化；一次转场只突出一个主要结果。文案需要阅读时，为主动作安排可读状态，不机械套用某个网站的固定秒数。
- 至少比较静态初始态、变化中、静态结束态。连续输入还要检查停手与反向；只看开场录像不足以证明交互成立。
- 参考提炼为“输入—视觉回应—信息作用”，再替换题材；不把霓虹、玻璃、粒子或巨大文字当成创意本身。
- 原站源码、访问权限或性能数据不可见时，不推断其生成模型、框架、内存占用或移动端质量。安装组件前另查当前依赖与具体许可。
- 不照搬参考提示词中的整页滚动映射、固定帧数、固定 DPR 或强制滚动锁定；这些选择回到用户的内容、宿主容器与现有预算流程。
- 素材首次就绪前保留可读页面；加载交接保持同一视觉状态；装饰失败不能阻断导航。

素材质量与连续性验收仍使用 [qa.md](qa.md)。本参考库的作用是帮助选对方向，不替代 Pilot 或目标设备验证。