Thinking Shimmer Label
A band of light travels through a status word while the letters stay perfectly still.
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, useLayoutEffect, useRef, useState } from "react";
import {
animate,
motion,
useMotionValue,
useReducedMotion,
useTransform,
} from "motion/react";About this pattern
The quietest way to say a model is still working. A second, full-strength copy of the word sits pinned exactly over the resting one and is revealed only through a soft band that slides across it, so the glyphs never move, resize or re-flow — the only animated value in the component is the position of that mask. The lit copy inherits the page's own ink, so it reads on a light theme and on a dark one without a colour to configure. Linear travel with a breath between passes: an eased highlight stalling mid-word looks like a stutter.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
A status caption carries a travelling highlight while a reply is prepared.
Related patterns
- Embedding Cluster SettleScattered points drift into labelled groups, the halos and captions landing after them.
- Inline Completion GhostA faint prediction appears ahead of the caret and firms up to real content when it is accepted.
- Sentiment Tint ShiftEach row's edge and wash ease from neutral toward the tone the classifier detected.