Offline Banner Drop
A connection bar opens down out of the top edge, holds while the app retries, then retracts once it is back.
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, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Offline Banner Drop
*
* The connection bar: it opens down out of the top edge when the
* network goes, holds while the app keeps trying, turns over to aAbout this pattern
Losing the network is not an event to fire and forget: the notice has to stay for as long as the condition does. The strip opens its height from the top edge while its contents lead the drop by a few pixels, so it reads as arriving from above the viewport rather than expanding out of nothing. A band crossing the bottom edge carries the retrying — the one looping part of the pattern, and it stops the instant the connection returns. The bar then turns over to a restored line in place, holds it long enough to be read, and only then gives the space back. Nothing rebounds: a connection warning that bounces reads as a toy.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
Connection state reported as a thin strip rather than a blocking dialog.
Related patterns
- Connection RestoredThe offline bar turns green, confirms, and retracts in one continuous move.
- Password Strength BarA segmented meter fills bar by bar and shifts hue as a password improves.
- Session Expiry CountdownA session-timeout dialog counts down on a draining ring with a clear stay-signed-in action.