# 动效与光影 (/docs/components/motion)

动效与光影汇总了 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 的缓动令牌里取值。

<D.Durations />

## 弹簧参数 [#弹簧参数]

需要物理回弹的地方用 Framer Motion 弹簧，4 套参数对应不同的“重量”。

<D.Springs />

## 2.0 动效引擎 [#20-动效引擎]

2.0 把常见动效改成纯 CSS 实现，不依赖 JS 动画库。

<D.MotionEngine />

## 推理光晕与扫光 [#推理光晕与扫光]

模型推理时，输入区周围有暖色光晕，文字有扫光，表示“正在想”。

<D.Glow />

## 滚动渐隐 [#滚动渐隐]

可滚动区域的边缘用遮罩渐隐 28px，停在顶部时顶边不渐隐。

<D.ScrollFade />

## 怎么在项目里使用？ [#怎么在项目里使用]

复制 [code-examples/](https://github.com/Caho1/open-claude-ui/blob/main/code-examples) 里对应的文件，并引入 `cds-theme.css`。例如：

```css
.panel {
  transition: transform var(--cds-dur-base) var(--cds-ease-out);
}
```

## 相关页面 [#相关页面]

- [2.0 新增](/docs/components/v2)
- [v2 第四章](/docs/v2/04)
- [v1 第四篇](/docs/v1/04)
- [全部 Open Claude UI 组件演示](/docs/components)