Video Buffer Ring
The frame dims and a turning arc holds over it, then dissolves outward on resume.
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 · Video Buffer Ring
*
* A stall, handled honestly: the frame dims, a ring turns over it while
* the buffered range keeps creeping forward, and on resume the ringAbout this pattern
A stall handled honestly. A scrim fades over the still — a dim rather than a blur, so the picture stays readable and the work stays on the compositor — and an arc turns above it at a constant linear rate, because an eased turn reads as a stutter, which is the one thing a buffering indicator must never suggest. Underneath, the buffered range keeps creeping forward while the played range is frozen solid: bytes are arriving, the playhead is not moving, and both facts are visible at a glance. On resume the arc expands slightly as it fades, so the stall ends with a release instead of a cut. Reduced motion keeps the dim, the frozen playhead and the announced status, and stops the turn.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Media player
Playback stalls behind a dimmed frame while the buffered range keeps extending.
Related patterns
- Search Results SwapStale answers dim and stay put while the fresh set cross-fades over them.
- Skeleton to ContentBreathing placeholders hand off to the real content in one cross-fade and a small lift.
- Table Rows PopulatePlaceholder cells resolve one column at a time, so the eye follows the fill instead of hunting for it.