← All patterns

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

React

Each finished stage of an agent run ticks over and grows its connector toward the one after it.

aiminimalcalm

AI Avatar Idle

React

The assistant mark keeps a slow breath with a halo swelling a half-beat behind it, so the panel reads as awake.

aifriendlycalm

AI Result Reveal

React

The result card rises into place while its confidence value counts up to the final number.

aipremiumcalm

AI Thinking Pulse

React

A calm breathing dot with a soft expanding ring — the app is thinking, not stuck.

aicalmminimal
interactive

Answer Rating Flip

React

The chosen thumb turns onto its filled face and the row hands over to a short thank-you.

aifriendlysubtle

Autocomplete Rise

React

A completion panel lifts into place under the field, its rows landing a beat apart.

aiminimalfriendly
interactive

Citation Popover

React

Pointing at a citation marker floats the source card up beside it, and leaving puts it away.

aielegantminimal
interactive

Context Pill Attach

React

A dragged file is caught by the prompt bar and lands inside it as a context pill.

aifriendlyminimal

Diff Suggestion Highlight

React

Changed lines wash in their green and red tints one after another, then the accept bar rises beneath them.

aiminimalcalm

Embedding Cluster Settle

React

Scattered points drift into labelled groups, the halos and captions landing after them.

aifuturisticelegant

Guardrail Notice

React

A declined request settles in under the prompt, an amber edge draws down it, and the way forward follows.

aicalmminimal

Progressive Image Generation

React

A generated picture resolves from blur to sharp across a few discrete refinement passes.

aifuturisticpremium

Inline Completion Ghost

React

A faint prediction appears ahead of the caret and firms up to real content when it is accepted.

aisubtleminimal
interactive

Model Switch Morph

React

Choosing another model glides the selection across and eases the badge into that model's name and accent.

aipremiumelegant

Multi-Agent Handoff

React

A pip crosses the connector, the receiving card lifts as it takes the work, and the finished one recedes with a drawn check.

aifuturisticpremium
interactive

Prompt Submit Lift

React

The composed prompt lifts out of the field and docks as a sent message while the thread makes room.

aifriendlypremium
interactive

Prompt Template Fill

React

Picking a starter writes its outline into the composer with the blanks lighting up.

aifriendlyenergetic
interactive

Reasoning Steps Unfold

React

A collapsed trace line opens into numbered reasoning steps, each arriving as the panel grows.

aicalmminimal
interactive

Regenerate Swap

React

The old answer dissolves upward while the new one rises into the space it left.

aicalmfriendly

Retry Backoff Countdown

React

A ring empties over the wait while the seconds count down to the next automatic attempt.

aicalmminimal

Scan Sweep

React

A scan line travels across the surface being analyzed, then rests before the next pass.

aifuturisticenergetic

Semantic Search Rerank

React

First-pass hits travel to their meaning-ranked places while each relevance bar grows to its score.

aielegantcalm

Sentiment Tint Shift

React

Each row's edge and wash ease from neutral toward the tone the classifier detected.

aicalmelegant
interactive

Source Fan Out

React

A tilted deck of reference cards fans apart to show what an answer was grounded in.

aielegantpremium
interactive

Stop Generation Cut

React

Halting a stream folds the caret away, closes the partial answer with a hairline, and states that it stopped.

aiminimalcalm

Streaming Code Block

React

Generated code arrives line by line while the panel grows downward to fit it.

aifuturisticminimal

Streaming Text Reveal

React

Words arrive one at a time behind a soft caret — the answer is being written, not loaded.

aicalmfuturistic

Suggestion Chips Cascade

React

Suggested next actions land in quick succession under the answer, one chip after another.

aifriendlyenergetic
interactive

Summary Condense

React

The dropped lines fade out from the bottom up, and only then does the card close the height they held.

aielegantpremium

Thinking Shimmer Label

React

A band of light travels through a status word while the letters stay perfectly still.

aisubtleelegant

Token Budget Meter

React

The fill climbs to the conversation's usage while its colour walks to amber, and the trim notice fades in at the threshold.

aiminimalsubtle

Tool Call Badge

React

A badge announces the tool an agent is calling, turns while it runs, then settles into the result count.

aiminimalfuturistic

Transcription Word Lock

React

Each spoken word lands dimmed under a dotted rule, then firms up to solid once the recognizer commits.

aifuturisticminimal
interactive

Translate Crossfade

React

Copy hands over to its translation while the block eases to the new text's height.

aicalmpremium

Voice Waveform Listen

React

Bars rise and fall against the room while the microphone is open, so the mic reads as live.

aienergeticfuturistic