AI motion patterns
Thinking, streaming, scanning and result states — the vocabulary for interfaces where the wait is open-ended and the output arrives in pieces.
React + Motion · new patterns added daily
Agent Step Timeline
ReactEach finished stage of an agent run ticks over and grows its connector toward the one after it.
AI Avatar Idle
ReactThe assistant mark keeps a slow breath with a halo swelling a half-beat behind it, so the panel reads as awake.
AI Result Reveal
ReactThe result card rises into place while its confidence value counts up to the final number.
AI Thinking Pulse
ReactA calm breathing dot with a soft expanding ring — the app is thinking, not stuck.
Answer Rating Flip
ReactThe chosen thumb turns onto its filled face and the row hands over to a short thank-you.
Autocomplete Rise
ReactA completion panel lifts into place under the field, its rows landing a beat apart.
Citation Popover
ReactPointing at a citation marker floats the source card up beside it, and leaving puts it away.
Context Pill Attach
ReactA dragged file is caught by the prompt bar and lands inside it as a context pill.
Diff Suggestion Highlight
ReactChanged lines wash in their green and red tints one after another, then the accept bar rises beneath them.
Embedding Cluster Settle
ReactScattered points drift into labelled groups, the halos and captions landing after them.
Guardrail Notice
ReactA declined request settles in under the prompt, an amber edge draws down it, and the way forward follows.
Progressive Image Generation
ReactA generated picture resolves from blur to sharp across a few discrete refinement passes.
Inline Completion Ghost
ReactA faint prediction appears ahead of the caret and firms up to real content when it is accepted.
Model Switch Morph
ReactChoosing another model glides the selection across and eases the badge into that model's name and accent.
Multi-Agent Handoff
ReactA pip crosses the connector, the receiving card lifts as it takes the work, and the finished one recedes with a drawn check.
Prompt Submit Lift
ReactThe composed prompt lifts out of the field and docks as a sent message while the thread makes room.
Prompt Template Fill
ReactPicking a starter writes its outline into the composer with the blanks lighting up.
Reasoning Steps Unfold
ReactA collapsed trace line opens into numbered reasoning steps, each arriving as the panel grows.
Regenerate Swap
ReactThe old answer dissolves upward while the new one rises into the space it left.
Retry Backoff Countdown
ReactA ring empties over the wait while the seconds count down to the next automatic attempt.
Scan Sweep
ReactA scan line travels across the surface being analyzed, then rests before the next pass.
Semantic Search Rerank
ReactFirst-pass hits travel to their meaning-ranked places while each relevance bar grows to its score.
Sentiment Tint Shift
ReactEach row's edge and wash ease from neutral toward the tone the classifier detected.
Source Fan Out
ReactA tilted deck of reference cards fans apart to show what an answer was grounded in.
Stop Generation Cut
ReactHalting a stream folds the caret away, closes the partial answer with a hairline, and states that it stopped.
Streaming Code Block
ReactGenerated code arrives line by line while the panel grows downward to fit it.
Streaming Text Reveal
ReactWords arrive one at a time behind a soft caret — the answer is being written, not loaded.
Suggestion Chips Cascade
ReactSuggested next actions land in quick succession under the answer, one chip after another.
Summary Condense
ReactThe dropped lines fade out from the bottom up, and only then does the card close the height they held.
Thinking Shimmer Label
ReactA band of light travels through a status word while the letters stay perfectly still.
Token Budget Meter
ReactThe fill climbs to the conversation's usage while its colour walks to amber, and the trim notice fades in at the threshold.
Tool Call Badge
ReactA badge announces the tool an agent is calling, turns while it runs, then settles into the result count.
Transcription Word Lock
ReactEach spoken word lands dimmed under a dotted rule, then firms up to solid once the recognizer commits.
Translate Crossfade
ReactCopy hands over to its translation while the block eases to the new text's height.
Voice Waveform Listen
ReactBars rise and fall against the room while the microphone is open, so the mic reads as live.