Read Receipt Tick
One tick becomes two, then the pair tints — sent, delivered, read.
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 { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Read Receipt Tick
*
* The quietest status in messaging: one tick becomes two, then the pair
* tints — sent, delivered, read — under an outgoing bubble.About this pattern
Delivery state under an outgoing message, told in three beats. The first tick slides the last couple of pixels into place, the second slides out from behind it when the message lands on the other device, and the pair takes on the read tint when it is opened. The tint is a crossfade between a neutral layer and a colored one rather than a stroke interpolation, which keeps the pending state derived from the page's own text color. The glyph is 12px tall, so the springs are flat by design and the state is announced as words for screen readers.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Chat thread
Single tick, double tick, then a blue pair once the message is opened.
Related patterns
- Clipboard Toasts StackRepeat copies push a short stack of confirmations that shuffle down and dim instead of piling up.
- Save Indicator SettleA turning ring under "Saving" resolves into a drawn tick under "Saved", then the chip recedes.
- Hover Tooltip FadeA hint fades up after a deliberate pause, so crossing a row of icons never sets off a flicker.