Agent Step Timeline
Each finished stage of an agent run ticks over and grows its connector toward the one after it.
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 { useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Agent Step Timeline
*
* A vertical run log for an agent working through a plan: the current
* marker turns, the finished one ticks over, and the connector growsAbout this pattern
An agent that works for thirty seconds without saying anything is indistinguishable from one that has crashed. A vertical run log fixes that by making completion the thing that moves: the current marker turns, the finished marker fills and has its tick drawn, and the connector grows down toward the following stage so the whole run reads as one thread rather than four rows. Every outcome line is already in the layout and only fades in, so nothing below a completing stage ever shifts — the list can be read while it is still running.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
A running plan whose stages complete one at a time while the work continues.
Related patterns
- Tool Call BadgeA badge announces the tool an agent is calling, turns while it runs, then settles into the result count.
- AI Thinking PulseA calm breathing dot with a soft expanding ring — the app is thinking, not stuck.
- Retry Backoff CountdownA ring empties over the wait while the seconds count down to the next automatic attempt.