Shimmer Sweep
A soft highlight travels across placeholder blocks, each one a beat behind the last.
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 type { CSSProperties } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Shimmer Sweep
*
* A soft highlight travels across placeholder blocks, each one a beat
* behind the last, for waits with no progress to report.About this pattern
The waiting texture for feeds and message lists with no progress to report. One soft band of light crosses each placeholder in turn; because the blocks are offset in reading order, it reads as a single light source moving over the panel rather than every box blinking together. It is deliberately quiet — this loops for as long as the request takes, so it has to stay unremarkable at the tenth repetition as well as the first.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Dashboard
The open-source treatment that made the travelling highlight the default skeleton look.
Related patterns
- Content Placeholder PulsePlaceholder blocks rise and fall together on one slow cadence, so the region reads as dormant rather than busy.
- Skeleton to ContentBreathing placeholders hand off to the real content in one cross-fade and a small lift.
- Cache Hit InstantCached content gets no entrance at all; only the values that actually changed animate.