Presence Dot
The status dot eases between tints, settles once, and sends a single ring out on coming online.
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,
animate,
motion,
useMotionValue,
useReducedMotion,
} from "motion/react";About this pattern
Presence is the smallest status in an interface and one of the most watched, which makes restraint the whole design. The dot crosses between its state colors on a short ease and settles once — a three-keyframe tween rather than a spring, so a twelve-pixel mark can never ring around its own size — and coming online sends exactly one expanding ring, because a dot that pulses forever is a distraction carrying no news. State is never left to color alone: a hole punched off-centre reads as away, a centred hole reads as offline, and a solid disc is online, with the hole taking the page's own background color so the shape holds up in either theme. The wording underneath swaps in a fixed-height slot, so the row never grows when someone steps away.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Chat thread
A member's presence marker fills when they become active and hollows out when they are away.