Scan Sweep
A scan line travels across the surface being analyzed, then rests before the next pass.
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 { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Scan Sweep
*
* A scan line travelling across the surface a model is reading, with a
* rest between passes so the loop reads as repeated work rather than aAbout this pattern
Attach it to whatever the model is reading — an uploaded document, a photo, a receipt, a chart. The line crosses the region once, pauses, and goes again, so the loop reads as repeated passes of work instead of a spinner parked on top of content. Because the sweep is scoped to one surface it also answers the question a global loader can't: which thing is being processed right now.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Search results
Scanning treatment over the camera frame while the subject is identified.
Related patterns
- Voice Waveform ListenBars rise and fall against the room while the microphone is open, so the mic reads as live.
- Embedding Cluster SettleScattered points drift into labelled groups, the halos and captions landing after them.
- Progressive Image GenerationA generated picture resolves from blur to sharp across a few discrete refinement passes.