Changes Saved Pill
A pill drifts up from the toolbar to confirm an autosave, then dissolves.
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 { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Changes Saved Pill
*
* The receipt for an autosave: a small pill drifts up out of the
* toolbar, rests just long enough to be read, then keeps drifting asAbout this pattern
Confirmation for something the reader never asked to be told. The pill rises a few pixels out of the toolbar on a flat spring, rests exactly long enough to be read, and then keeps drifting the same direction as it fades — so its whole life is one upward move rather than an arrival followed by a retreat. It has no dismiss control and no timer, because a save is not a decision. The surface uses the CSS system colors, so it stays opaque and legible over the document in either color scheme.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
Short confirmations appear next to the control that caused them and leave without a dismiss button.
Related patterns
- Save Indicator SettleA turning ring under "Saving" resolves into a drawn tick under "Saved", then the chip recedes.
- Clipboard Toasts StackRepeat copies push a short stack of confirmations that shuffle down and dim instead of piling up.
- Sync Status RotateA sync glyph turns slowly while changes upload, then stops on a tick.