Components

Change summary

What moved since last time – one metric per row with a colored trend

Todo tower

A physics stack of task blocks: finish one and the tower above it drops into place.

Agents

Delegate board

Hand tasks to agents by dragging them on; each agent previews its new "busy until" time, or switch on Auto.

Email draft

Agent-written email for review – switch recipient and tone, edit inline, remove the attachment, send or discard with undo

Smart recommendation

Suggestion card with a confidence signal, alternatives to switch to and accept with undo

Tool call card

An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up

Buttons

Button

Primary, secondary, ghost and destructive buttons with icons, sizes and a shimmering loading state

Reaction bar

Like, comment, repost and share in one pill – icons pop and fill, counts roll in digit by digit

Cards

Card stack

A pile of cards that fans out on hover and springs back into a scattered stack.

Holographic card

A trading-card surface with a rainbow foil that shifts as it tilts toward the pointer.

Liquid glass card

A glass panel that frosts and slightly refracts whatever sits behind it.

Spotlight card

A card that lights up under the pointer, with a brighter rim where the light meets the edge.

Tilt card

A card that leans toward the pointer in 3D with a following glare.

Tips panel

Grid of short tips with one action each – taken tips turn into a done state

Charts

Bar chart

Grouped or stacked vertical bars with a value tooltip on hover or focus; every bar is reachable by keyboard.

Donut chart

A ring of rounded, gapped slices with a centred total, percentage pills and a legend; hovering or focusing a slice lifts it out and shows its value in the centre.

Gauge

An SVG arc meter with an animated fill, ticks, coloured bands and a centred readout.

Humidity dial

A radial tick gauge whose lit band carries a travelling wave.

Line chart

Smooth lines with a soft area fill, a shared crosshair and a tooltip; arrow keys step through the points.

Tick meter

A horizontal progress meter drawn as thin ticks: a solid bar with an end marker, or discrete cells that light up, with an optional headline value, delta and scale.

Chat

Artifact preview

The pane beside an AI chat that shows the HTML page the model is writing: a live, scriptless draft while it streams, then sandboxed versions that swap in without a flash, with a version stepper, desktop / tablet / phone widths, and copy, download and open.

Comment thread

One comment with replies – an assistant reports what it did, folds open details and answers @mentions

Glass recorder

A liquid-glass voice button for AI apps: tap the mic and it stretches into a pill with a running timer, a stop bubble and a colour glow inside the glass that swells with your voice. Opens the microphone and records the audio itself.

Inline citation

A source chip inside the sentence that relies on it: hover or focus opens a card with the source's title, type, date, the quoted passage and a link.

Message actions

The quiet bar under an AI message – copy turns into a check, regenerate spins and unfolds a version switcher, thumbs pop and ask why, read aloud becomes a tiny equalizer

Prompt input

The box at the bottom of an AI chat: a textarea that grows with the text, Enter to send and Shift+Enter for a new line, files by picker, paste or drop shown as chips with thumbnails, a row of tools, and a send button that turns into stop while the model answers.

Thinking loader

A small working pill for AI replies – an eight-ray spinner and a shimmering label that rolls through phases and settles on a check

Code

Code block

Code, terminal output, logs and diffs in a quiet panel: a header with the file name and a copy button, built-in highlighting, line numbers that are never copied, added / removed / highlighted lines, wrapping, and folding long blocks to a few lines.

Command menus

Command palette

A ⌘K launcher: type to fuzzy-filter grouped commands, arrow to highlight, Enter to run.

Compare

Design tweak

A before/after compare card with a slider or toggle, plus a short list of what was removed — for the "remove first" design pass.

Dialogs and sheets

Dialog

A centred modal on the native <dialog> element: title, description, body and a button row, with an alert variant for confirmations.

Sheet / drawer

A panel that slides in from the right, left or bottom. From the bottom it is a mobile drawer with a grab handle you drag down to dismiss.

Docks

Floating dock

A macOS-style dock whose icons swell as the pointer passes.

Effects

Aurora background

Slow drifting bands of soft color behind your content.

Border beam

A light that travels around the border of its positioned parent.

Click spark

Every click throws a short burst of rays from the pointer.

Dither gradient

A gradient drawn as ordered dither dots on a WebGL canvas: linear, radial or conic, paper to ink or through a palette, with a slow noise drift. Ink and paper follow my accent and background tokens. Ships the dithercn shader engine, so any GLSL tone field can be dithered the same way.

Dotted sphere

A ball of evenly spread dots, lit by depth, that turns slowly while its surface breathes in waves, or spins and can be flung. The pointer presses a soft dent into the front face. 2D canvas, no WebGL, follows the theme.

Meteors

Streaks that fall across a positioned parent.

Pixel FX

Pixel art reward and feedback effects played on a crisp, transparent canvas: confetti, achievement toast, coin collect, level up, quest complete, combo counter, crit and damage numbers, countdown, heart lost, health bar hit, exclamation. Each one is code (no sprite images); replay it by changing trigger, recolor it with palette, change its words with text.

Progressive blur

A blur that eases in towards one edge of its parent, with no hard line: the soft frosted fade under headers, toolbars, image captions and scroll edges. Stacked backdrop-filter layers, optional tint, no JavaScript at runtime.

Gestures

Slide to confirm

A handle you push across a track; past the mark it finishes the journey itself and unfurls into the confirmation.

Media

Marquee

An endless ticker for logos, testimonials or text, with edge fades and pause on hover.

Menus

Goo dropdown

A menu button whose list oozes out of the trigger like a droplet.

Profile menu

Account card with the signed-in user, menu actions and profile setup progress

Messages

Decision inbox

Open decisions with two quick answers each – answered ones confirm and fold away

Notification stack

Notice cards stacked behind each other – dismiss the front one to reveal the next

Toast

Brief notices that stack in a corner, fan out on hover, pause while you read and swipe away. Call toast() from anywhere.

Mobile

Tab bar

The bottom navigation of a mobile app: icons, labels, badges and a pill that glides to the active tab.

Numbers

Number ticker

Odometer-style numbers – every digit rolls to its new value and counts in from zero when it scrolls into view

Patterns

Grid background

A fine line grid that drifts slowly behind your content and fades out towards the edges

Magnet lines

A grid of short lines that all turn to point at the cursor.

Ripple

Concentric rings that breathe outward from the center.

Pickers

Date picker

A date field that opens a month calendar, plus the Calendar on its own, with the full WAI-ARIA grid keyboard model.

Swatch palette

A strip of colour swatches that morph to a new palette on refresh, with tunable corner and morph speed.

Presence

Agent cursor

An AI agent's cursor that moves through a path with human-like aim, a name tag and click pulses.

Liquid orb

A glassy swirling AI presence orb that changes pace as the assistant listens, thinks or speaks.

Robot head

A glossy TV-headed robot whose LED face acts out what your agent is doing: idle, thinking, searching, listening, speaking, working, happy, error or sleeping. Four head shapes, eyes that follow the pointer, a hop on click. 2D canvas, no WebGL, no dependencies.

Product scenes

Window frame

Desktop window chrome for product shots and illustrations: a browser (address, back/forward, tabs), an app window (centred title, toolbar), an app with a full-height sidebar, a dark terminal and a frosted glass browser. Comes with skeleton bars and terminal lines for faking UI inside it. Follows the theme.

Progress

Progress tracker

Onboarding checklist with an animated progress bar, ticks that draw themselves and auto play

Selects

Filter menu

Grouped filters with removable chips, collapsible checkbox groups, Clear all and full keyboard control

Sidebars

Nav sidebar

The left-hand navigation of a desktop app: grouped items with icons and badges, a pill that glides to the active page, and a collapse button (or ⌘B) that folds it into an icon rail where every icon shows its label in a tooltip.

Skeletons

Shimmer loader

Skeleton blocks that share one soft light sweep, plus shimmering text for “Thinking…” states

Special inputs

OTP input

The verification code field done right – a gliding focus ring, paste and SMS autofill, a calm shake on errors and a morph into Verified

Spinners

Bars spinner

The classic twelve-bar activity spinner.

Dot matrix loader

A small LED-style grid of dots that light in a pattern while something loads.

Gooey loader

Three blobs that melt into each other through an SVG goo filter.

Tables

Data grid

A compact spreadsheet-style grid with keyboard navigation, inline edits, range select, sort and undo.

Tabs

Direction aware tabs

Tabs whose content slides in from the side you moved toward while the panel height springs to fit.

Segmented control

Switch between two to six options – a raised pill or underline that glides, stretches a little and can be dragged across, with icons, counts and badges

Text effects

Blur reveal

Text that sharpens into place from a soft blur, letter by letter or word by word.

Highlighted text

An inline marker that sweeps behind a phrase and inverts the text it covers.

Scramble text

Text that resolves left to right out of random glyphs, like a terminal decoding.

Text reveal

Text that arrives word by word or letter by letter – each piece rises out of a soft blur as it scrolls into view

Text fields

Seek bar

A search pill that leans toward the cursor and springs open into a field.

Text field

Label, input, hint, error and character count wired together with the right ids and ARIA; validate inline or pass errors from your form library.

Text-mode art

ASCII art

Animated text-mode pictures for quiet, terminal-style pages: a spinning donut, twelve spinners, progress bars, a CI pipeline, a boot log, a 404, a loading skeleton, sparklines, uptime bars, falling glyphs, plasma and a typewriter. Every frame is plain text in the current colour, so it follows the theme.

Toggles

Checklist

A to-do list whose boxes swell and settle with a tunable spring when ticked.