Save Indicator Settle
A turning ring under "Saving" resolves into a drawn tick under "Saved", then the chip recedes.
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, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Save Indicator Settle
*
* The autosave status line: a turning ring under "Saving" resolves
* into a drawn tick under "Saved", and once the news has landed theAbout this pattern
Autosave has to be believable without being loud. The chip turns while the write is in flight, swaps the ring for a tick that strokes itself in, and once the news has landed it fades out of the toolbar instead of sitting there forever. Ring and tick share one 14px cell and both words share one grid cell, so the chip reserves the wider state up front and the swap cannot twitch the header sideways. Nothing springs and nothing scales: a status indicator lives in the corner of the eye, and a bounce there reads as an interruption.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
The header reports the write in flight, then settles on a saved state.