Typing Indicator
Three dots rise and fall in sequence inside the bubble a reply will occupy.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Typing Indicator
*
* Three dots inside the bubble the reply will occupy. They share one
* cycle offset by a third each, so the movement reads as travelling
* left to right rather than pulsing as a block — and the travel staysAbout this pattern
The oldest liveness signal in messaging, and the one most often overdone. Three dots share one cycle offset by a third each, so the movement travels left to right instead of pulsing as a block, and the travel stays small enough that the bubble itself never appears to move. The indicator occupies the same slot the incoming message will land in, so nothing jumps when the words arrive.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Chat thread
Dots sit in the slot the incoming bubble will occupy.