No Connection
Two halves of a broken link stand apart, then close the gap in one settle when the attempt lands.
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 · No Connection
*
* The illustration carries the state instead of decorating it: two halves
* of a link stand apart with the break marked between them, and when theAbout this pattern
The drawing carries the state rather than decorating it. Two halves of a link sit apart with short break marks above them, and when the attempt succeeds the halves travel toward each other on the same spring, meeting in the middle while the marks fade and the bar between them appears. One illustration, two readings — no second artwork, no color change, nothing that needs a legend. The copy and the button crossfade in fixed cells so the block holds its exact size through the recovery. Reduced motion swaps the two readings without the travel.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Inbox
The unreachable-page screen leads with a single line drawing and a retry beneath it.
Related patterns
- Error RecoveryA failed panel settles without alarm, and the retry glyph turns exactly once per attempt.
- All Caught UpA bell settles, a small badge completes its mark in one stroke, and the list confirms you are current.
- Empty CartThe cart mark drops and settles once, then recently viewed items slide in as the way back to shopping.