动效与光影
Open Claude UI 组件演示：时长与缓动、弹簧参数、推理光晕、滚动渐隐（手册 v1 第四篇、v2 第四篇）。每个演示附规格和源码出处。
动效与光影汇总了 Claude 桌面端的时间和曲线：5 档时长令牌、缓动曲线、Framer Motion 弹簧参数，以及推理中的光晕和滚动渐隐。本页 5 个演示对应手册 v1 第四篇和 v2 第四篇，数值以 2.0 为准。
关键数值
| 项目 | 数值 | 出处 |
|---|---|---|
| 时长 | fast 60 · snap 120 · base 200 · sheet 300 · slow 450ms | v2/04 §4.3 |
| ease-out | cubic-bezier(.165, .84, .44, 1) | v2/04 §4.3 |
| ease-snap | cubic-bezier(.32, .72, 0, 1) | v2/04 §4.3 |
| ease-overshoot | cubic-bezier(.34, 1.3, .64, 1) | v2/04 §4.3 |
| 推理光晕呼吸 | 1.8s | v1/04 §4.2 |
| 滚动渐隐 | 28px | v1/04 §4.3 |
时长与缓动
所有过渡从 5 档时长里取值，曲线从 cds-theme.css 的缓动令牌里取值。
弹簧参数
需要物理回弹的地方用 Framer Motion 弹簧，4 套参数对应不同的“重量”。
2.0 动效引擎
2.0 把常见动效改成纯 CSS 实现，不依赖 JS 动画库。
CDS 2.0 物理动效引擎实机呈现
1. Pill Elastic Pop (1.32x Overshoot)
2. Staggered Chip Cascade Entrance
3. Skeleton 105° Linear Sweep (Wave Mode)
推理光晕与扫光
模型推理时，输入区周围有暖色光晕，文字有扫光，表示“正在想”。
长思维链推理时，外框会出现暖色光晕。
滚动渐隐
可滚动区域的边缘用遮罩渐隐 28px，停在顶部时顶边不渐隐。
第 1 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 2 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 3 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 4 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 5 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 6 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 7 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 8 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 9 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 10 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 11 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 12 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 13 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 14 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 15 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 16 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 17 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 18 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 19 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 20 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
怎么在项目里使用？
复制 code-examples/ 里对应的文件，并引入 cds-theme.css。例如：
.panel {
transition: transform var(--cds-dur-base) var(--cds-ease-out);
}