Reasoning Steps Unfold
A collapsed trace line opens into numbered reasoning steps, each arriving as the panel grows.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useState } from "react";
import {
AnimatePresence,
motion,
useReducedMotion,
type Variants,
} from "motion/react";
About this pattern
The trace behind an answer, kept out of the way until someone wants it. Collapsed, it is a single quiet line; expanded, it is the ordered account of how the answer was reached. The panel height tweens on a hard-eased curve while the steps land on a short stagger, so the eye follows the account downward instead of being handed a wall of prose. The rail beside the numbers extends with them, which is what makes the list read as a sequence rather than a set.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
A collapsed reasoning summary that expands into the intermediate steps.
Related patterns
- Accordion ExpandOne section opens as the previous one closes, both heights easing over the same beat so the list never jumps.
- Agent Step TimelineEach finished stage of an agent run ticks over and grows its connector toward the one after it.
- AI Thinking PulseA calm breathing dot with a soft expanding ring — the app is thinking, not stuck.