Warning Attention Pull
A warning tile earns a glance by drawing its own outline once, with a faint tint settling underneath.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Warning Attention Pull
*
* A warning tile that earns a glance by drawing its own outline once,
* left to right around the box, while a faint tint settles underneath.
* No flash, no pulse, no second pass.About this pattern
Getting attention without spending it. The tile draws its outline in a single clockwise pass while a faint tint settles behind the contents, which is enough to move the eye across the page and no more — a warning that pulses or flashes trains people to look away from it, and one that repeats becomes furniture. A resting outline sits under the animated one so the tile is never border-less on the first frame, and the outline is an explicit path rather than a rect because stroke length is only dependable on paths across browsers. Nothing springs, nothing repeats, and the text only fades up a few pixels into place.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Dashboard
Account warnings sit in a bordered tile that is emphasised rather than flashed.
Related patterns
- Banner DismissAn announcement strip fades its message, then collapses its own height so the page closes the gap.
- Offline Banner DropA connection bar opens down out of the top edge, holds while the app retries, then retracts once it is back.
- Password Strength BarA segmented meter fills bar by bar and shifts hue as a password improves.