AI CSS Animations

CSS AI Animations: Thinking, Streaming & Agent States

60 copy-paste animations for every state an AI feature moves through: thinking indicators, streaming replies, tool calls, agents waiting for approval, voice orbs, image generation progress, and the done and error states that close the loop.

Thinking Shimmer Label

A Thinking label with a soft band of light sweeping through its letters while a four point sparkle turns a quarter and breathes. The sweep is a gradient clipped to the text.

thinking · sparkle · minimal

Thought For Reasoning Disclosure

A collapsed Thought for 12s row whose chevron turns as the reasoning panel opens, the muted thoughts blur in beside a hairline rule, and the answer below slides down to make room.

thinking · chat · minimal

Reasoning Trace Steps

Reasoning steps blur in one after another down a hairline thread. The step being thought about stays bright with a pinging ring, older ones dim. One registered @property drives it all.

thinking · minimal

Starburst Thinking Mark

An eight ray starburst whose rays stretch and settle in a wave that runs around the circle while the mark slowly turns, next to a muted Pondering label. Rays are rotated spans, no SVG.

thinking · sparkle · minimal

Web Search Source Chips

A Searching the web row with an orbiting magnifier, then source chips with little favicons pop in one by one on a spring and a 14 sources count fades in beside the label.

thinking · chat · card

Reading Files Pills

Reading 4 files with a pill per file: a tinted sweep fills each pill in turn under an accent outline, read files go solid, and the header flips to Read 4 files with a drawn check.

thinking · card · minimal

Plan Checklist Forming

A plan card where each step forms in turn: its checkbox springs in, a skeleton bar grows to the width of the step, then the words resolve over it. The header settles to Plan · 4 steps.

thinking · card

Streaming Reply With Soft Caret

A reply streams in word by word in uneven bursts, each word fading up from a blur while a soft glowing caret rides the newest one, then blinks once the answer is done. No JavaScript.

streaming · chat · glow

Gradient Edge Streaming Text

Paragraph lines write themselves left to right behind a feathered leading edge that glows in the accent color before settling to plain text. A gradient clipped to each line, moved by one @property.

streaming · glow · minimal

Streaming Code Block

A dark code block from a chat reply fills in line by line with syntax colors, line numbers arriving with each row and a soft highlight on the line being written. Each line is wiped in by clip-path.

streaming · card · dark

Inline Citation Pills

An answer writes itself sentence by sentence and a numbered citation pill springs in after each one. Then pill 2 lights up and its source card rises underneath, like a hovered reference.

streaming · chat · card

Assistant Typing Indicator

An assistant avatar with a light arc circling its rim beside a soft chat bubble, where three dots rise and brighten in a smooth wave. The modern take on is typing, tail corner toward the avatar.

chat · thinking · sparkle

Chat Reply Arriving

A user message springs up into the thread, the thread scrolls to make room, and the assistant bubble arrives as typing dots that unfurl into the reply. The bubble opens with an animated clip-path.

chat · streaming

Follow-up Suggestion Chips

Suggested follow-ups rise into place under a reply as pill buttons, staggered on a spring with a blur, then a single glint passes across each one. Real buttons with hover and focus styles.

chat · button · minimal

Skeleton Morphing Into Text

Shimmering skeleton bars, each already the width of its line, flatten toward the baseline as the real reply blurs up through them line by line. Bars and text share one grid cell per line.

streaming · minimal

Stop Generating Pill

The floating pill a chat shows while a reply streams: a stop square breathing inside a pinging halo, the label, an Esc key hint, and a soft accent ring pulsing around the whole button.

button · streaming · glow

Terminal Thinking Status Line

A coding agent's terminal status line: a dingbat star cycles through its frames, a brighter wave runs through the word Percolating, and an elapsed seconds counter ticks up from a registered integer.

thinking · dark · minimal

Thinking Summary Ticker

A collapsed thinking pill whose one line summary changes as the model works: each phrase rises out of a blur, holds, then lifts away for the next while a small sparkle turns beside it.

thinking · sparkle · chat

Streaming Markdown Table

A markdown table from a chat answer filling in cell by cell, each value lifting out of a blur along its row's hairline, then a Popular badge springs onto the Team row once the table is done.

streaming · chat

Inline Ghost Text Suggestion

A focused message field where an AI completion streams in as faint ghost text after the caret, a Tab key hint appears and presses, and the suggestion turns solid as the caret jumps to the end.

streaming · card · minimal

Agent Tool Call Card

A tool call card reading Bash npm test: a live dot pings while a timer counts up, then a check pops in and the line settles on 42 passed. The timer is an animated @property integer.

agent · tool-call · card · done

Agent Terminal Output

A dark terminal where pnpm build types itself out, then the build log prints line by line the way a real shell does, ending on built in 2.41s and a fresh prompt. A stepped height reveals the lines.

agent · tool-call · streaming · dark

Agent File Edit Diff

An edit card for src/lib/auth.ts: two old lines blush red, three new ones push in green beneath them, and the +12 -3 counters tick up as the change lands. The counters are @property integers.

agent · tool-call · card

Agent Plan Checklist

An agent's plan card working down four steps: the current row spins and brightens, finished rows get a check and a struck line, and the count climbs to 4 of 4. One @property clock drives every row.

agent · card · done

Agent Waiting for Approval

A permission card asking to run git push origin feat/rate-limit, with Deny and Allow once buttons. An amber dot breathes, a waiting timer counts the seconds and a soft ring pulses off Allow.

agent · approval · card · button

Agent Status Pill

A compact pill for one agent that cycles Idle, Working, Needs input and Done. The state color is an animated @property color, the label rolls with a springy overshoot and the chip resizes to fit.

agent · minimal · done

Agent Fleet Grid

A dashboard of six agents in a grid, each with a live status dot and a progress line. Running agents fill in bursts, flash green and start the next task, each on its own clock.

agent · card · dark

Sub-agent Tree

A main agent spawns three sub-agents: the tree line draws down, each branch elbows out and its row fades in with a spinner, then each finishes and the count reaches 3/3. One @property clock.

agent · tool-call · card · done

Context Window Meter

A context meter that fills turn by turn up to the 80% auto-compact line, shimmers while it compacts the conversation, then squeezes back down. The token count is an @property integer counter.

agent · card · minimal

Agent Token Cost Counter

A session cost card where each agent turn raises a new bar and the dollar figure rolls up to $1.84 alongside the token total. Dollars, cents and tokens are @property integers fed to CSS counters.

agent · card · minimal

Agent Handoff

A Planner agent finishes a spec and hands it to a Coder agent: a spec.md chip arcs along a dashed track, the receiver pulses on arrival and its spinning ring takes over. Both labels swap as it lands.

agent · card

Background Task Toast

A stacked toast springs up to say tests are running in the background, fills its progress line, flips to Tests passed with a check, then slides away. The toast behind it is one pseudo-element.

agent · card · done

Agent Run Timeline

A horizontal run timeline: Plan, Code, Test, Open PR. A glowing head travels the rail, each stop pulses while active and fills with a check as it is left behind, and the step label above rolls along.

agent · card · done · glow

Agent Is Browsing

A mini browser on docs.stripe.com where an agent's cursor clicks Refunds in the sidebar, the page scrolls, a highlight sweeps the lines it reads and a click lands on Copy. Built from skeleton blocks.

agent · tool-call · card

Agent Task Complete

The done state for a finished agent run: a ring draws itself, fills, a check strokes in with a small burst of sparks, then Task complete and Opened PR #482 slide up beside it. Pure SVG strokes.

agent · done · sparkle

Agent Error With Retry

A calm failure card for Build failed with 2 type errors: no shake, just a soft red icon, a ring that drains as Retrying in 3, 2, 1 counts down, then a quiet Retrying spinner. All @property driven.

agent · error · card

Agent Cursor Editing Code

A dark editor where an agent's named cursor opens a new line in auth.ts and types await limiter.consume(req.ip); with the line glowing as it is written. The text steps in by ch.

agent · streaming · dark

Agent Pull Request Checks

The pull request an agent just opened, with lint, typecheck and test turning from spinning amber to green checks one by one. When the last passes the summary flips and the Merge button lights up.

agent · done · card · button

Agent Working an Issue

An issue row assigned to an agent as it moves Todo, In Progress, In Review, Done. The status ring fills like a pie through an animated @property, and the status and activity lines roll with each move.

agent · card · done

Agent Generating UI Preview

A generated dashboard assembling itself in a preview pane: the sidebar slides in, stat cards pop up, a chart line draws and the skeleton resolves into real numbers before the badge reads Ready.

agent · streaming · card · sparkle

Voice Orb Listening to Speaking

A glossy sky orb with clouds drifting inside wobbles gently while listening, then beats in bigger pulses as it speaks, and the label swaps to match. Gradients only, one shared clock.

voice · orb · glow

Siri Style Edge Glow

A phone screen whose edges light up with a multicolor glow that circles the frame and bleeds softly inward while the assistant listens. A rotating conic gradient, masked to a ring and blurred.

voice · glow · dark

Dictation Composer Waveform

A chat composer in dictation mode: a strip of recorded waveform bars scrolls left and fades at both ends, beside a pulsing record dot, a timer, cancel and done buttons. The bars are one inline SVG.

voice · chat · minimal

Live Voice Waveform Bars

Seventeen rounded bars rise and fall at their own tempos under a center weighted envelope, like a mic picking up speech. Each bar alternates on its own duration, so the pattern never visibly repeats.

voice · minimal

Push to Talk Button

A mic button that gets pressed in, fills with the accent and sends rings outward while it is held, then springs back on release. The hint below swaps between Hold to talk and Release to send.

voice · button

Live Transcription Words

Spoken words land one by one in a transcript card, arriving blurred and faint as a guess, then settling into solid text. One animated @property drives every word, so the sentence clears together.

voice · streaming · card

Mesh Gradient Voice Blob

An organic blob whose outline keeps morphing while a mesh of accent, pink, cyan and white light swirls inside it, with a soft glow underneath. Border radius keyframes plus two counter rotating layers.

voice · orb · glow

Voice Agent Call Card

A dark call card for a voice agent: a glassy orb swirls with two tones and throws soft rings while it speaks, next to the agent name, a live timer, mute and an End call button.

voice · orb · card · dark

Voice Mode Speaking Dots

Four round dots rest and breathe while the assistant waits, then stretch into pills of different heights as it speaks and fold back. Each dot reads its own heights inside one shared keyframe.

voice · minimal

Diffusion Image Reveal

A frame of boiling grain slowly denoises into a dusk landscape while a step counter climbs to 30 of 30. The scene is pure gradients, the grain an SVG turbulence filter.

image-gen · card

Progressive Tile Render

A frosted 4 by 4 grid clears tile by tile in a diagonal wave, each tile flashing an accent outline as it renders, to reveal a glossy sphere. One @property clock drives all sixteen tiles.

image-gen · card

Frosted Preview Percentage

A frosted image preview clears as a big percentage counts to 100 inside a progress ring, then a Ready chip pops in. Counter, ring and blur all read one animated integer @property.

image-gen · done · card

Four Image Batch Generating

Four images generating side by side: each tile shimmers with its own progress bar and resolves at its own pace while a counter reports how many are ready. One @property clock, four start times.

image-gen · card

Video Generation Timeline

A dark video generation panel: frames fill into a filmstrip left to right behind a scrubbing playhead, the preview shows the newest frame with its sun setting, and a frame counter climbs to 120.

image-gen · card · dark

AI Upscale Before and After

A before and after handle glides across a night skyline: the left side is soft and pixel gridded at 512 px, the right crisp at 4x. One animated @property drives the clip, the line and the knob.

image-gen · sparkle · card

Ask AI Glowing Input

A real text input with a slowly turning gradient border and a soft halo behind it, while placeholder ideas roll past and step aside the moment you type. Conic border, blurred copy, :placeholder-shown.

chat · glow · sparkle · dark

AI Sparkle Shimmer Button

A dark pill button with a bright glint orbiting its 1px border and a pair of sparkles that twinkle as the glint passes the icon. A rotating conic gradient masked to the button edge.

button · sparkle · glow · dark

Enhance Prompt Rewrite

A prompt box where the Enhance button gets pressed, sparks fly off its wand, a glint sweeps the text and the short prompt blurs into a richer rewrite. Crossfaded spans on one shared clock.

button · sparkle · card · streaming

Model Picker Pill Switch

A model picker pill cycles Opus, Sonnet and Haiku: each name slides up into place while the four-point glyph spins a quarter turn and a soft accent ring pulses out from the pill.

chat · button · sparkle · minimal

AI Command Palette Opening

A dark command palette springs open, its AI actions stagger in beneath the search row, the highlight glides down to Translate, flashes as it is chosen and the palette closes.

chat · sparkle · card · dark

How to use these ai animations

Open any state, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required: no JavaScript, no icon fonts, no images. Each snippet's classes are prefixed with its own name, so a whole chat UI can use several at once.

Set --aia-color to your brand accent and --aia-size to scale the piece; everything inside is measured in em. The demo text is placeholder copy: swap in your model's real output, tool names and file paths.

Live states carry role="status" or aria-live so screen readers hear the change, and every snippet ships with a prefers-reduced-motion rule. In your app, swap states by toggling a class or data attribute when the model's stream events arrive.

Frequently asked questions

How do I make an AI thinking animation in CSS?

Animate something that reads as attention without implying progress: a shimmer sweeping across a 'Thinking' label, breathing dots, or a slowly turning sparkle. Every thinking entry above is pure HTML and CSS with a role="status" label.

How do I show streaming text from an LLM?

Append tokens to the element as they arrive and let CSS handle the feel: a blinking caret after the last word, a soft fade on each new chunk, or a gradient mask on the trailing edge. The streaming entries show each look with static demo text.

What states should an AI agent UI show?

At least thinking, working (with the tool or step it is on), waiting for the person, done and failed. Showing which tool is running and what it touched builds more trust than a generic spinner.

Do these work with React, Vue or Svelte?

Yes. They are plain HTML and CSS, so paste the markup into any component and the CSS into its stylesheet, then switch states with a class.