Animated React components installed as source. Text Reveal, Number Roll, Link, Field and Input are free; the rest comes with a one-time license.
Text that resolves out of noise. A sweep crosses the string at a steady rate; characters behind it are final, characters ahead of it churn. Decoding, not glitching.
Example usage of Scramble Text.
Choose one option from a list. The trigger looks like an input; when there is room the list opens over it with the chosen option sitting where the trigger was, like a native menu on a Mac, and otherwise just below it.
Example usage of Select.
A band of light that passes over text while something is working. It is made from the text’s own colour, so it suits any text and anything inside it, icons included.
Example usage of Shimmer.
Draws a signature, or any hand-drawn SVG, stroke by stroke at a steady pen speed, lifting between strokes. Pen centrelines are stroked; filled outlines are revealed as ink along their own path.
Example usage of Signature.
Where an answer came from. A row of site icons, a count and the first domains, opening into the full list: numbered to match the citations in the text, each with its site, title and a line of what it said.
Example usage of Sources.
Splits a string into words and characters you can style one by one. Words still wrap, spaces stay real, screen readers hear the sentence, and every piece knows its index, word and measured line.
Example usage of Split Text.
Prompts to try next, as pills or as a list of follow-ups. They arrive one after another so the eye reads them in order.
Example usage of Suggestions.
Example usage of Suggestions.
An on and off that takes effect at once. The thumb slides across and stretches a little while you hold it.
Example usage of Switch.
Tabs whose selected chip tightens under a press, stretches towards the tab you pick, then gathers itself, with panels that drift in from the same side. A raised chip in a tray, or a sliding underline. Built on Base UI, animated in CSS.
Example usage of Tabs.
Example usage of Tabs.
The to-do list an agent is working through. A ring fills as tasks finish, the one in progress shimmers over the file it is touching, a finished one keeps what it changed at its side, and folded it is a single line naming what is happening now. It sits best in a tray rising out of the prompt input.
Example usage of Tasks.
Text that arrives piece by piece: characters, words or lines. Each one fades, lifts a little and sharpens from a slight blur, so it reads as settling into focus. Pure CSS, no animation library.
Example usage of Text Reveal.
Example usage of Text Reveal.
Change a word without it blinking. The old word lifts away and blurs out as the new one rises in, and the space between them stretches to fit, so nothing beside it jumps.
Example usage of Text Swap.
A scroll progress indicator you can scrub. A slim red needle runs along a tray of hairline ticks as the page scrolls, and dragging the needle scrolls the page. Built on Base UI, animated in CSS.
Example usage of Tick Slider.
A short message that rises in from just below where it rests, out of a slight blur, and leaves the same small way. Newer toasts stack in front and older ones tuck in behind, a little smaller and dimmer; hover the stack to spread it out. When a toast changes, its words and icon morph in place. A pill variant puts the whole message on one dark line, and a single manager makes each new message take the place of the last. Built on Base UI, animated in CSS.
Example usage of Toast.
Example usage of Toast.
Example usage of Toast.
Example usage of Toast.
Example usage of Toast.
Example usage of Toast.
Example usage of Toast.
A row of controls that act on one thing: buttons, toggles, a choice of one, a link or an input. Arrow keys move between them, and where you pick one of a few the highlight glides between them.
Example usage of Toolbar.
Example usage of Toolbar.
Example usage of Toolbar.
Example usage of Toolbar.
What an agent did, one row per step. A step shimmers while it runs and draws a tick when it finishes; rows with output open to show it, and a group folds the whole run into one line.
Example usage of Tool Call.
Example usage of Tool Call.
A small label for a control. Give a row of controls one tooltip between them and it stays open as you move along: the label glides to the next control, changes width to fit, and the words dissolve from one to the next. Built on Base UI, animated in CSS.
Example usage of Tooltip.
One exchange: what you asked, then what the agent did and said. The prompt is a bubble on the right with its attachments above it and copy and edit on hover; the reply is a column the other pieces stack into, in the order they happened.