Connection Restored
The offline bar turns green, confirms, and retracts in one continuous move.
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 · Connection Restored
*
* The offline bar earning its exit: it warms to green, says so, and
* retracts — collapsing and sliding on the same curve, so the wholeAbout this pattern
Recovery, told as a single gesture. The bar tints from warning amber to confirmation green while the pulsing dot gives way to a tick and the label crossfades in a slot sized to its longer state. After a beat it leaves: the wrapper collapses and the bar slides up on the same duration and the same curve, so the exit reads as one movement rather than a shrink plus a slide, and the content underneath closes the gap without a jump. Reduced motion stills the dot and shortens the exit, but the color and the words still do the work.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
Offline strip confirms the reconnection before removing itself from the top of the list.
Related patterns
- Offline Banner DropA connection bar opens down out of the top edge, holds while the app retries, then retracts once it is back.
- Queue Position AdvanceYour place in line steps down, the figure swapping upward as the bar of people ahead shortens.
- Undo SnackbarA removed row leaves a bar behind, and a hairline drains across it toward the point of no return.