Refund Status
A refund walks down its stages while the vague estimate firms up into a real date.
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 { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Refund Status
*
* A refund walks down its stages while the estimate firms up: the vague
* window a customer is given at the start crossfades into a real dateAbout this pattern
Waiting for money to come back is an anxious kind of waiting, so this moves slowly, downward and completely unexcited — no pulse, no loop, no celebration at the end. The rail fills on an eased curve rather than a spring, because a segment that overshoots runs past the stop it is meant to reach. The one thing that changes its wording is the estimate: the window the customer was given at the start crossfades into a firm date once the money has genuinely left, inside a fixed-height slot so the row cannot resize under someone re-reading it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Order tracking
Return tracking replaces a business-day window with a concrete date once the refund is issued.
Related patterns
- Order Tracking ProgressA shipment walks its stages while the connector fills from stop to stop.
- Checkout Step ProgressThe finished stage folds into a one-line recap while the following one opens and the rail fills.
- Shipping Option SelectOne plate travels to the chosen speed while the arrival estimate restates itself and the total follows.