Narrative First
- - 动效必须回答“为什么现在动”
- - 关键内容优先稳定展示，动效做辅助
- - 先保证阅读流畅，再做视觉强化
Apply · 所有介绍页 / 案例页的首要准则
MOTION RULES
做之前，先过这套 rules
Performance、accessibility、reading order、timing consistency。
Performance Guardrail
- - 优先 transform / opacity
- - 滚动监听使用 RAF 节流
- - 持续动画控制密度，避免 GPU 长时间高压
Apply · Landing / 大量卡片页面
Accessibility Baseline
- - 必须支持 prefers-reduced-motion
- - 动效关闭后信息结构不丢失
- - 颜色和对比度满足基础可读性
Apply · 全站统一要求
Consistency by Tokens
- - 时长、位移、缓动统一 token 管理
- - 同类组件共享同一交互反馈曲线
- - 新动效先放实验站，再推广到业务站
Apply · 跨站点动效复用
TIMING TOKENS
Phase Cycle
1700ms
控制 atlas preview 的状态轮换频率，避免预览节奏碎裂。
Settle
700ms · cubic-bezier(0.22, 1, 0.36, 1)
用于卡片、进度、章节等主要状态交接，是整站 preview 的默认过渡基线。
Emphasis
500ms · ease-out
用于焦点确认和高亮切换，比主过渡更快，减少 hover/focus 拖沓感。
Ambient
8s orbit · 9s/11s drift
限定环境型动画上限，只允许 orbit/drift 这类低频背景信号存在。
REFERENCES
SHIP CHECKLIST
- 动效是否明确服务一个阅读/理解目标？
- 去掉动画后，信息是否仍完整可读？
- 滚动和 hover 动效是否过密导致噪音？
- 移动端是否降低了持续背景动画？
- 是否有统一 token 而不是硬编码参数？
评审顺序：Narrative → Accessibility → Performance → Visual Polish
Experimental Module
Shader wash 和 accent ring 只负责实验气氛，不进入正文层。
Review Module
Rule focus 和 checkpoint handoff 用来表达 review 顺序，不做装饰背景。
MODULE CONTRACTS
实验模块和 review 模块，也有各自的 contract。
这里看的是模块级信号，不是整页模板。
Shader Wash
When
实验型 preview 首次出现，或用户切到实验模块时。
Then
暖色 wash 缓慢漂移，只负责说明“这是高上限实验区”，不抢正文阅读焦点。
Duration
9s drift / 11s reverse
Easing
ease-in-out
Reduced Motion
停止背景漂移，仅保留静态色面层次。
Shader Accent Ring
When
实验焦点切换或 phase 变化时。
Then
局部 accent ring 缩放，提示当前实验点发生了状态更新。
Duration
160ms scale shift
Easing
ease-out
Reduced Motion
直接切换到目标尺度，不做连续缩放。
Governance Rule Focus
When
规范 review 流程推进到下一条规则时。
Then
当前规则条的宽度和对比度提升，帮助团队理解“现在哪条规则是当前重点”。
Duration
220ms width shift
Easing
cubic-bezier(0.2, 0, 0, 1)
Reduced Motion
直接更新激活状态，不做宽度动画。
Governance Sequence
When
检查顺序从 Narrative 切到 Accessibility / Performance / Polish 时。
Then
序列条平滑交接当前 checkpoint，表达评审顺序，而不是制造装饰性动画。
Duration
180ms progress settle
Easing
ease-out
Reduced Motion
直接切换到目标 checkpoint。
TEMPLATE LIBRARY
先打开页面，再回到这里过规则。
OPEN PAGES