Form Autosave Indicator
A field that kept itself pulses its border once and writes the time 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 { useEffect, useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Form Autosave Indicator
*
* A field that keeps itself. When the pause after typing is long enough,
* the border pulses once and a timestamp fades in underneath — the wholeAbout this pattern
When there is no save button, the field has to answer the question the button used to answer. A single pass of an accent border around the box that was stored says which field it was — a global chip in a corner never does — and the timestamp underneath says when, then keeps aging so it stays true minutes later. One pulse, never a repeat: this fires every time the user stops typing, and a border that throbs turns the most routine event in the form into an alarm. The status is written as well as animated, so a screen reader and a reduced-motion visitor get the same receipt everyone else does.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
Edits are kept as they happen, with no explicit submit anywhere.
Related patterns
- Required Field MarkUnanswered fields mark themselves one after another down the form — a wave, not a jolt.
- Sync Status RotateA sync glyph turns slowly while changes upload, then stops on a tick.
- Character Count LimitA small ring closes as the field fills, shows what is left once the cap is in sight, and tints once when the text runs past it.