Banner Dismiss
An announcement strip fades its message, then collapses its own height so the page closes the gap.
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 { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Banner Dismiss
*
* An announcement banner that leaves in two beats: the message fades
* and lifts, then the strip collapses its own height so whatever sitsAbout this pattern
Dismissing a banner is a layout event as much as a visual one: something goes away and everything under it has to move. The exit runs in two beats — the message fades and lifts a few pixels, then the strip closes its height on a short ease so the content below rises into the space rather than snapping upward. The order matters, because collapsing a strip while its sentence is still legible squashes the sentence. The spacing under the banner lives inside the collapsing element, so the gap closes with it and the page is not left with a hole. Nothing springs: an overshooting collapse would drag the page past its resting line and back.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Dashboard
Dismissible notices collapse out of the flow rather than blinking away.
Related patterns
- Warning Attention PullA warning tile earns a glance by drawing its own outline once, with a faint tint settling underneath.
- Error Retry NudgeA failed action answers with one short damped nudge and becomes its own retry.
- Inline Error RevealA field marks itself invalid: the error ring fades on and the message expands into place below.