Read Receipts
A message walking from sending to read, with colour and not a third tick carrying the last step.
Build a chat message that walks through its delivery states. FOUR states, in order, about 900ms apart: sending, sent, delivered, read. Dropping "sending" hides the moment the network is still trying, which is exactly when people retype the message. The rule everybody gets wrong: TWO TICKS MEAN DELIVERED, AND COLOUR MEANS READ. Do not add a third tick for read: at message size nobody can tell two ticks from three, so you have built two states that look identical. One tick for sent, two for delivered, and the pair turns accent-coloured for read. Back the ticks with WORDS. Two small grey checks are not something most people can decode, and "Read 14:32" is worth stating outright. Swap the label rather than cross-fading it: the old state exits upward while the next enters, about 160ms. Two overlapping words gives a frame where the status is unreadable. Give the status row a FIXED HEIGHT so the bubble above never shifts as the label changes length. Keep every timeout in a ref and clear them on unmount. This runs one timer per state. Make it replayable (data-demo-trigger). Accessibility: aria-live="polite" on the label so delivery reaches a screen reader without the ticks being seen, and mark the tick SVG aria-hidden since the label already says it. Under prefers-reduced-motion, render the read state immediately and start no timers at all. Colors as tokens: accent for the bubble and for the read ticks, muted ink for the unread ticks and labels, on-primary ink inside the bubble. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.