Retry Backoff Countdown
A ring empties over the wait while the seconds count down to the next automatic attempt.
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 { useCallback, useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Retry Backoff Countdown
*
* A rate-limited request waiting out its backoff. A ring empties over the
* wait, the seconds count down beside it, and each further attempt waitsAbout this pattern
What a rate-limited request should look like while it waits. A ring empties linearly over the backoff — linear because that is what a clock does — the seconds tick beside it in tabular figures that never change size, and the bar underneath shows each step of the backoff getting longer than the last. Each attempt restarts the ring from full rather than continuing the previous one, so the wait is always read against the interval it belongs to. When the request finally lands, the ring redraws in the success hue instead of being replaced.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Dashboard
Rate-limited actions show the wait remaining rather than an open-ended state.
Related patterns
- 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.
- Reasoning Steps UnfoldA collapsed trace line opens into numbered reasoning steps, each arriving as the panel grows.