Back to the library
Presence — typing indicator
Variant: Typing
Three dots 130ms apart, and the reason to reach for it over a spinner is that it claims a person rather than a process. Travel is 5px and the opacity swing is 0.26 to 1, because at 7px across a dot's height barely registers and its brightness is unmissable — the lift makes it a wave, the opacity makes it visible. Brightness peaks four percent of the cycle before height does, the same anticipation a struck key has. The pass takes 740ms of a 1.4s loop and the remainder is silence: an indicator that never rests is a machine, and the gap is what makes it someone thinking.
presencestatusloop
The source
A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Presence — typing indicator</title>
<style>
:root {
/* Neutrals — fixed, never remixed. */
--ivory: #faf9f5;
--paper: #ffffff;
--oat: #e3dacc;
--slate: #141413;
/* Knobs — the remix API. A knob exists iff declared here and used below. */
--hue: 38.8;
--lift: 0;
--chroma: 1;
--speed: 1;
/* Accents — derived from the knobs with the family's offsets baked in,
so one hue roll moves them together. Defaults reproduce the original hex. */
--clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
--clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
--olive: oklch(
calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3)
);
--rust: oklch(
calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3)
);
/* Clock — 1.4s: one pass of the wave takes about 740ms of it and the
rest is silence. The gap is the whole difference between a person
composing a sentence and a spinner reporting that a server is busy. */
--cycle: 1.4s;
--t: calc(var(--cycle) / var(--speed));
--_lag: calc(130ms / var(--speed));
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ivory);
font-family:
system-ui,
-apple-system,
'Segoe UI',
Roboto,
sans-serif;
color: var(--slate);
}
.thread {
display: flex;
align-items: flex-end;
gap: 9px;
}
.face {
display: grid;
place-items: center;
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: color-mix(in srgb, var(--clay) 16%, var(--paper));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clay) 34%, transparent);
font-size: 11px;
font-weight: 600;
color: var(--clay-d);
}
/* No tail: a pointer drawn as a rotated square has to cross the corner
radius to reach the avatar and the join is a visible seam at this size,
and the pairing with the face already says who is speaking. A literal
pill radius rather than a --round-scaled one — this corner is half the
bubble's own height, and squaring it would break its physics. */
.bubble {
display: flex;
align-items: center;
gap: 6px;
padding: 12px 15px;
border-radius: 999px;
background: var(--paper);
border: 1px solid var(--oat);
}
.dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--clay-d);
opacity: 0.26;
animation: wave var(--t) var(--ease-in-out) infinite;
}
/* 130ms apart. Below about 90ms the three dots read as one flash; above
200ms the wave stops being a wave and becomes three separate dots
taking turns. */
.dot:nth-child(2) {
animation-delay: var(--_lag);
}
.dot:nth-child(3) {
animation-delay: calc(var(--_lag) * 2);
}
/* Travel is 5px and opacity travels from 0.26 to 1, because at 7px across
a dot's height is barely legible and its brightness is unmissable — the
lift is what makes it a wave, the opacity is what makes it visible.
Brightness peaks at 11% and height at 15%: the dot lights just before it
arrives, which is the same anticipation a struck key has. */
@keyframes wave {
0%,
4% {
transform: translateY(0);
opacity: 0.26;
}
11% {
opacity: 1;
}
15% {
transform: translateY(-5px);
}
27% {
opacity: 0.26;
}
34%,
100% {
transform: translateY(0);
opacity: 0.26;
}
}
@media (prefers-reduced-motion: reduce) {
/* The lift goes, the brightness stays — it was carrying most of the
signal anyway. Slowed to 2.5s a pass so the loop reads as breathing
rather than blinking, and the 130ms offsets scale with it, which is
what keeps the wave travelling instead of firing at once. */
.dot {
animation-name: wave-dim;
animation-duration: calc(var(--t) * 1.8);
animation-timing-function: ease;
transform: none;
}
.dot:nth-child(2) {
animation-delay: calc(var(--_lag) * 1.8);
}
.dot:nth-child(3) {
animation-delay: calc(var(--_lag) * 3.6);
}
@keyframes wave-dim {
0%,
4% {
opacity: 0.26;
}
14% {
opacity: 0.85;
}
30%,
100% {
opacity: 0.26;
}
}
}
</style>
</head>
<body>
<div
class="thread"
role="img"
aria-label="A chat bubble with three dots rising in sequence: someone is typing"
>
<span class="face">RK</span>
<div class="bubble">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.