Session Expiry Countdown
A session-timeout dialog counts down on a draining ring with a clear stay-signed-in action.
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 · Session Expiry Countdown
*
* The workspace dims, a timeout dialog rises over it, and a ring drains
* beside a figure that steps down a second at a time. Staying signed inAbout this pattern
A timeout warning that reassures instead of alarming. The workspace dims but stays visible — the point of the message is that the draft is still there — and the dialog rises over it with the renew action already the obvious one: filled, first in reading order, and paired with a plain-text sign-out rather than a matching button. The ring drains a second at a time on a linear curve, locked to the figure beside it rather than running its own animation, and the figure steps between values in a fixed tabular slot: it translates one line height and crossfades, never scaling, because the one element a person is actually reading is the last thing that should wobble. Nothing here is red and nothing pulses. Staying signed in runs the ring back to full, states the renewed window, and hands the page back.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Modal sheet
A session-expiry modal counts the remaining seconds while offering to renew in place.
Related patterns
- 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.
- Validation Summary ListA rejected submit answers with the whole list of what stopped it, each entry arriving a beat apart.