Scroll Progress Bar
A hairline on the top edge tracks how far through a long article the reader has come.
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, useRef, type UIEvent } from "react";
import {
animate,
motion,
useMotionValue,
useReducedMotion,
useSpring,
} from "motion/react";About this pattern
Orientation for long reading: a rule pinned to the top edge that grows with the scroll and shrinks when the reader goes back. The bar is a projection of the scroll position rather than a clip that plays, so it can never disagree with where the page actually is. It scales along one axis instead of animating its width, which keeps the whole thing on the compositor and lets it track a fast flick without re-laying out the page each frame. The one subtlety is smoothing: raw wheel input arrives in steps, so the fraction runs through an over-damped spring — enough to take the staircase out, never enough to let the bar rock past the reader's real position and come back.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
A slim rule across the top of a story that fills as the reader moves down it.
Related patterns
- Route Progress TopA top-edge bar advances during navigation and completes with a quick finish.
- Back to Top AppearA return control lifts into the corner once the reader is deep enough for it to matter.
- Breadcrumb Trail AppendGoing one level deeper slides a new crumb in from the right while the trail behind it recedes.