Skip to content

AI & AgentsPro

20 effects for the ai & agents family · every one loops · pure CSS unless a card says otherwise

The previews are open to everyone; the code of these effects comes with WunderUI Core and Pro.

PlannerBuilder

You see which agent holds the work.

Pure CSSAI & Agents

Bars scaling on a rolling delay. scaleY only, so it never triggers layout.

Pure CSSAI & Agents

The correct idle indicator for a system that is thinking rather than loading. A spinner says wait; this says alive.

Pure CSSAI & Agents
Answer ready

It condenses out of the blur instead of growing. Good for an AI answer materialising.

Pure CSSAI & Agents

Rows fade in as they enter the scroller and out as they leave. Both ends from one view() timeline.

Modern CSSAI & Agents
npm i @wunderui/react

steps() plus a ch-based width. The caret is a border that blinks on its own timer.

Pure CSSAI & Agents
› resolving tokens› reading DESIGN.md› 129 components› building screen✓ done

Lines arrive, the oldest fade at the top edge.

Pure CSSAI & Agents

offset-rotate: auto turns the marker to face along the path. That is what a translate can never do.

Pure CSSAI & Agents

Steps tick off in order, not all at once.

Pure CSSAI & Agents
DESIGN.mdBuild the analytics screen+

A prompt box an agent is about to receive: a gradient rim that keeps travelling round it, a turning orb, letters that arrive softly and a line sweeping the bottom edge while it sends.

CSS + a few linesAI & Agents
Checking 214 variables against the design file

A highlight passing over text that never dims. Gleam clips a gradient into the glyphs and dips the base colour with it; this one leaves the text at full contrast and adds light on top, which is the difference between decoration and a status you still have to read.

Pure CSSAI & Agents
Send

The icon leaves the button entirely. Only works when the button does not clip its overflow.

Pure CSSAI & Agents

A short dash travelling a long dasharray. One property, no motion path.

Pure CSSAI & Agents

A stack fans out when the answer is backed by sources.

Pure CSSAI & Agents
Reading the codebaseComparing 214 tokensWriting the patch

The phrase swaps on one clock while the shimmer runs on another. Two independent timers on the same element is what stops it looking like a single scripted loop.

Pure CSSAI & Agents

A breathing orb reads as thinking; a spinner reads as loading.

Pure CSSAI & Agents

The typing indicator. The dots must not all reach the top together; the offset is the whole effect.

Pure CSSAI & Agents
Revenue is up 14.2% week on week.

steps() in blocks, not per character; models stream in chunks.

Pure CSSAI & Agents
get_mrr(period='7d')✓ 1 result

The call fills while it runs, the result snaps in under it.

Pure CSSAI & Agents
Indexing0123450123456789s

An activity glyph, the verb, and a running clock. The clock is two columns of digits on steps() timers, ten seconds and sixty; a real elapsed counter past a minute needs a few lines of JavaScript, this one does not.

Pure CSSAI & Agents