AI Thinking Animation: Motion & Light
Claude-style motion tokens: 5 durations (60–450ms), 3 cubic-bezier curves, Framer Motion springs, reasoning glow and 28px scroll fade. 5 live React demos.
Motion and light collects the timing and curves of the Claude desktop app: 5 duration tokens, easing curves, Framer Motion spring parameters, and the reasoning glow and scroll fade. The 5 demos on this page correspond to Chapter 4 of the v1 handbook and Chapter 4 of the v2 handbook, with 2.0 values taking precedence. This page is a translation of the Chinese demo page.
Key values
| Item | Value | Source |
|---|---|---|
| Durations | 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 |
| Reasoning glow breathing | 1.8s | v1/04 §4.2 |
| Scroll fade | 28px | v1/04 §4.3 |
Durations and easing
Every transition takes its duration from the 5 steps and its curve from the easing tokens in cds-theme.css.
Spring parameters
Where physical rebound is needed, Framer Motion springs are used; 4 parameter sets correspond to different "weights".
The 2.0 motion engine
2.0 moves common motion to pure CSS, with no dependency on a JS animation library.
CDS 2.0 物理动效引擎实机呈现
1. Pill Elastic Pop (1.32x Overshoot)
2. Staggered Chip Cascade Entrance
3. Skeleton 105° Linear Sweep (Wave Mode)
Reasoning glow and sweep
While the model is reasoning, a warm glow surrounds the input area and a sweep runs across the text to signal "thinking".
长思维链推理时，外框会出现暖色光晕。
Scroll fade
The edges of scrollable areas fade out over 28px with a mask; when scrolled to the top, the top edge does not fade.
第 1 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 2 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 3 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 4 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 5 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 6 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 7 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 8 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 9 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 10 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 11 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 12 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 13 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 14 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 15 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 16 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 17 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 18 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 19 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
第 20 行：滚动后顶部出现渐隐，回到顶部渐隐消失。
How do I use these components in a project?
Copy the matching file from code-examples/ and import cds-theme.css. For example:
.panel {
transition: transform var(--cds-dur-base) var(--cds-ease-out);
}Note: some labels inside the demo components are still in Chinese (they come straight from the repository's components); the behavior and specs are the same.
Sources
The durations and curves on this page come from Chapter 4 of the v2 handbook, the glow and fade from Chapter 4 of v1, and the code from the repository's code-examples/.
- open-claude-ui · code-examples/:
ClaudeMotionPresets.ts,CdsMotionEngine.tsx,ReasoningAmbientGlow.tsx,ScrollFadeContainer.tsx. - cds-theme.css: the
--cds-dur-*duration and--cds-ease-*easing tokens. - MDN: cubic-bezier(): how easing curves are written.
- MDN: mask-image: the mask property used by the scroll fade.
- MDN: prefers-reduced-motion: stopping animations when "reduce motion" is on.
- Motion (Framer Motion) docs: Transitions: what the spring parameters mean.
Related pages
Conversation & Input
Claude-style React chat UI components: message bubbles, thinking collapse, composer, / and @ commands, model switcher, MCP tool card. 6 live demos.
Media & Artifacts
Claude-style React media components: 6-band voice waveform, image lightbox, split pane, sandboxed Artifacts iframe, diff viewer, code block. 6 live demos.