Error Recovery
A failed panel settles without alarm, and the retry glyph turns exactly once per 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 { useEffect, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Error Recovery
*
* A failed section that stays useful. The block settles in without
* alarm, and the only thing that moves on retry is the glyph inside theAbout this pattern
A section that failed to load is still part of a working page, so the state arrives calmly: the mark settles once, the plain-words explanation follows, and the action sits under it with the reference number a support conversation will need. Retrying spends motion in one place — a single full turn of the glyph, tweened rather than sprung so it cannot overshoot — while the label crossfades inside a slot sized for both readings, keeping the button the same width mid-attempt. Recovered data replaces the block in the same grid cell, so nothing on the page jumps at the moment it works.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Dashboard
A metrics card that fails keeps its frame and offers a reload inside the same panel.
Related patterns
- Empty CartThe cart mark drops and settles once, then recently viewed items slide in as the way back to shopping.
- No ConnectionTwo halves of a broken link stand apart, then close the gap in one settle when the attempt lands.
- No Results SuggestAn empty result set settles into a quiet mark, then offers queries worth trying instead.