Anchor Scroll Highlight
Jumping to a section briefly washes its background so the eye lands in the right place.
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 { useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Anchor Scroll Highlight
*
* Jumping to a section moves the page, which means the reader arrives
* somewhere they did not walk to. A brief wash over the target — and anAbout this pattern
An in-page jump moves the reader somewhere they did not walk to, and the usual result is a second or two spent working out which heading was the one they asked for. A short wash over the target answers that on arrival, with an accent rule drawing down its edge for the case where the tint is too quiet to catch. The wash changes opacity and nothing else — no travel, no scale, nothing that would disturb the text about to be read — and it is keyframed to arrive fast and leave slowly, so it never becomes a state you have to dismiss. Re-pressing the same link remounts it, which is the only reliable way to restart an animation that has already finished.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Code review
Opening a link to a line or comment tints that target as the page arrives.
Related patterns
- Back to Top AppearA return control lifts into the corner once the reader is deep enough for it to matter.
- Popover Anchor FlipA popover opens below its trigger, or flips above when space runs out — the arrow follows.
- Scroll Progress BarA hairline on the top edge tracks how far through a long article the reader has come.