mizzle
AccordionaccordionRows that open to show more. One thing moves: the panel’s height, on one short clock both ways, so rows trading places leave everything below them still and nothing creeps into place at the end. The plus turns into a minus on the same clock. Built on Base UI, animated in CSS.
Authenticationauth-diagramThree ways to sign in on the left, one check in the middle, your app on the right. Each turn a different method sends a signal, the lock becomes a tick that draws itself, and the app opens.
ButtonbuttonA button that feels like an object: light on its surface, a shadow that deepens under the pointer and closes up when pressed, a quick press and a slow release. Busy and done states swap in softly without the button changing width. Built on Base UI, animated in CSS.
CardcardA soft tray around a raised surface, with concentric corners. As a link its surface lifts on hover and sinks on press, and its media breathes; it does not jump at the pointer.
Chat Dividerchat-dividerThe quiet structure of a conversation: a line for each day, a line where the unread messages start, and a small note when someone joins or leaves.
CheckboxcheckboxA box that ticks. The check draws itself in, and a parent checkbox shows a dash when only some of its children are on.
ComposercomposerWhere a message is written. It grows with what you type, Enter sends, and the microphone turns into a send button as soon as there is something to send.
ConfirmationconfirmationThe agent asking for a yes before it does something: run a command, start a plan, touch a file. One line says what and why, two buttons answer, and once answered it settles into a quiet record of the decision.
Data Griddata-gridA spreadsheet-style table on TanStack Table, assembled from the data pieces: toolbar with search and column picker, typed filters, the grid, a selection bar and a pager. Sort, pin, resize, reorder and hide columns from each header; select rows or drag out a range of cells and copy it; edit in place and save or discard the batch. Only the rows on screen are in the page, so three hundred rows cost the same as thirty.
Data Grid Column Menudata-grid-column-menuThe menu behind each Data Grid header: sort either way or as a second key, pin to the start or the end, reset the width and hide the column. The header's own label is the trigger.
Data Grid Filterdata-grid-filterThe Data Grid's filter bar. A popover picks a column and its value, and each filter becomes a chip whose operator and value can be changed on their own. Text, number, date, option and multi-option columns each get their own editor.
Data Grid Footerdata-grid-footerThe strip under the Data Grid: which rows are showing, how many are selected, the count, sum, average, minimum and maximum of the selected cells, and paging with a rows-per-page select.
Data Grid Iconsdata-grid-iconsThe stroke icons the Data Grid's parts share, drawn on a 16px grid in the current text colour.
Data Grid Row Controlsdata-grid-row-controlsThe controls that go in a Data Grid's own columns: a select-all and a per-row checkbox with shift-click ranges, a disclosure arrow for rows with sub-rows, and a row menu with your actions, copy and pinning.
Data Grid Selection Bardata-grid-selection-barA toolbar that rises over the foot of the Data Grid while rows are selected, with export, pin, an optional delete and a way to clear the selection.
Data Grid Toolbardata-grid-toolbarThe strip above the Data Grid: a title and row count, a search field that opens from an icon, the column visibility menu, and a menu for CSV export, print and resetting the layout.
Delete Buttondelete-buttonA delete button you press and hold. A fill sweeps across it while the bin’s lid lifts; let go early and it drains back, hold to the end and it deletes. Holding is the confirmation, so there is no dialog.
DiagramdiagramThe parts the illustrations are made from: tiles, routes with ports, and a signal that travels them, all on one clock. Lay out your own in a few lines, with the glyph set or any icons you already use.
Diagram Glyphsdiagram-glyphsSixteen marks drawn by hand for Diagram tiles on a 24 unit grid, in a line style and a solid style: app, database, mail, card, chart, key, phone, shield, bank, receipt, coin, check, cloud, user and bolt.
DialogdialogA dialog built like the card: what you read sits on a raised surface, what you press sits under it on the tray. It comes towards you in 250ms and is gone in 150. Built on Base UI, animated in CSS.
DissolvedissolveMake an element crumble into ash and drift off as smoke. A ragged edge crosses it, and everything the edge passes turns into fine grey dust, made from the element’s own text and icons, that lifts away on a slow swirl and thins out to nothing.
DitherditherLight drawn in two colours. A slow field of light, or a photograph, rendered the way a one-bit screen would: every dot is ink or nothing, and the shades are made by how thickly the ink is scattered. The pointer is a lamp.
Dot Matrixdot-matrixText on a dot matrix, five dots wide and seven tall, like a departure board. Unlit dots stay faintly visible, and when the text changes the dots that differ flip in a wave from the left. No JavaScript animation.
Dynamic Islanddynamic-islandA black pill that changes shape to fit what it is showing. Give it a view key and some content: it springs to the new size, overshooting a touch when it grows, and cross-fades what is inside. No animation library.
Expandable Tabsexpandable-tabsAn icon bar whose active tab says its name, and whose page grows out of the bar. The label, the highlight and the shell move as one, on one clock. No animation library.
FieldfieldA label, a control, a hint and an error, wired together. The label names the control, the hint describes it, and the error appears under it with a short settle when something is wrong.
FormformThe form that holds the fields. It validates with the browser’s own rules, shows errors where they belong, takes errors back from your server, and hands you the values as an object.
GlowglowSoft coloured light that drifts around the inside edge of an element. It follows any rounded shape, brightens and quickens with a level you give it, such as a voice or typing, and spins up and coasts to a stop instead of switching.
HighlighthighlightA mark made over a word or a phrase: a highlighter that wraps with the text, or a pen stroke under, around or round a word. Each is drawn when it comes into view. No JavaScript animation.
Image Generationimage-generationA placeholder that becomes the picture. A grid of soft tiles moves in a pattern of your choosing while the image is made, takes on its colours the moment it arrives, and swells from the middle until the tiles close into the photograph.
InputinputA text input and a textarea that grows as you write. Quiet at rest, lifted on focus, red when wrong.
Integrationsintegrations-diagramYour app in the middle and four services around it, joined by routes with small ports. An event comes in along one route, the app lights up, and the answer goes out along the others. Put your own marks on the tiles.
Letter Swapletter-swapOn hover each letter slides out and a copy slides in, one after another, optionally into a different word. Pure CSS: the stagger plays forward on enter and back on leave, and can be interrupted anywhere.
LinklinkA text link whose underline is drawn on the text: it draws in from the left, leaves to the right, and follows the words when they wrap. Four treatments, hover and keyboard alike, no JavaScript.
LoaderloaderSixteen dots in a square that swell and light up in a pattern: a scan, a wave, a twinkle, an orbit, a pulse, a spiral, rain or rising bars. Round, soft-cornered or square, in the text colour or a palette of your own, and small enough to sit beside a line of text.
MarkermarkerA line in a conversation that is not a message: what the agent is doing, what it did, or a labelled break.
MenumenuA menu of actions that grows out of the button that opened it and is gone the moment you choose. Items, ticks, choices, groups and key hints. Built on Base UI, animated in CSS.
MessagemessageOne message in a conversation: who sent it, the bubble, and what is said underneath. Messages from the same person run together, replies quote what they answer, and reactions sit on the bubble’s edge.
Message Scrollermessage-scrollerA transcript that only moves when the reader asks it to. A new prompt rises to the top with the end of the last answer still in view, the reply streams into the space below it, and scrolling away is respected until you jump back.
Message Statusmessage-statusWhere a sent message has got to: sending, sent, delivered, read, or not delivered. The clock fades into a tick, a second tick joins it, and read takes on colour.
Number Fieldnumber-fieldA number you can type, step with the buttons, or nudge with the arrow keys, kept inside its limits.
Number Rollnumber-rollA number whose digits roll to their new value. Each digit is a reel behind a soft-edged window: it rolls the way the number moved, streaks while it is fast, and digits fold in and out when the number changes length.
OrborbAn orb of fine dots that shows what an agent is doing. The same dots rearrange for each step it goes through: listening, thinking, searching, connecting, composing, imagining, shaping and speaking, each with a movement that means something. It works at 20 pixels beside a line of text and at any size on its own.
OutlineoutlineThe questions asked so far, as a rail of marks at the edge of the transcript. The mark for the turn you are reading is longer; rest on the rail and the questions fan out beside their marks; pick one and the transcript glides back to it.
Panel Menupanel-menuA menu built from stacked glass panels. Closed, it is a single bar. Open, the label flips, a tall body wipes down beneath it, and the link and language rows settle in after. Built on Base UI, animated in CSS.
Paymentspayments-diagramA card is charged, the payment clears, and three things follow: the money goes to the bank, a receipt goes out and your app is told. The coin turns into a tick while it all happens.
Pixel Fieldpixel-fieldA field of pixels that blooms under the pointer. Inside a card or a button, small squares spread out from where the pointer came in, keep twinkling, and draw back to where it left. Costs nothing when nobody is touching it.
Pixel Revealpixel-revealAn image that resolves out of big pixels. It arrives as a handful of coloured blocks and sharpens in steps, each one halving the blocks, until it is the picture. A real image sits underneath the whole time.
Pixel Transitionpixel-transitionSwap what is shown through a wall of pixels. Blocks cover the old content in dither order, the way old computers dissolved between screens, the content changes behind them, and they clear the same way. No JavaScript animation.
PlanplanA plan the agent proposes before it acts: a title, a line on what it changes, the scope in a few words, and numbered steps that arrive one by one with the files each one touches. Start it and the steps tick off as the work runs; ask for changes and say what should change without leaving the card.
PollpollA question with a few answers, sent as a message. Tap one and the bars fill to each answer’s share, the percentages roll into place and the people who chose it appear beside it. Let people pick several, close it when the time is up, and it settles into the final count.
Prediction Marketprediction-marketAn order ticket for a yes or no market. Pick an outcome and a side, type an amount, and the shares, the payout and the return roll to their new values. Built from the card, the tabs, the button and the rolling numbers.
Progressive Blurprogressive-blurA blur that gets stronger towards an edge, and a scroll area that wears one at each end: the ends blur and dissolve only while there is more to scroll that way. CSS only, on any background.
Prompt Inputprompt-inputWhere a prompt is written. It takes files from a picker, a drop or a paste, records voice notes with a glow that swells with your voice, opens a menu for / commands and @ mentions as you type them, picks a model, and turns its send button into a stop button while the answer streams.
QuestionnairequestionnaireAn agent asking before it acts, one question at a time, in the same tinted bubble as the rest of the conversation. Pick with a click or the number key shown at the end of each row, and a single answer moves on by itself; a strip of steps shows how far along you are, the card glides to the height of each question as one dissolves into the next, and once sent it keeps a record of what was said.
Radio Groupradio-groupPick one of a few. The chosen ring fills and a dot grows from its centre.
Reaction Pickerreaction-pickerA row of emoji to react with. Each one lifts and grows a little under the pointer, and the ones you have already used are marked.
ReasoningreasoningThe model thinking out loud, kept to a small window. While it thinks the latest lines scroll up in steps under a shimmering label; when it is done it folds away into how long it took, and opens again to read in full.
ResponseresponseAn answer as it streams. Each word comes out of a slight blur as it arrives, numbered citations become source chips you can hover, and the actions underneath copy, rate and retry.
RevealrevealAnything that arrives as it scrolls into view: a card, a paragraph, a section. It fades, rises a little and sharpens into focus; groups go one after another from a single trigger, and nothing inside is touched. No JavaScript animation.
Scramble Textscramble-textText 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.
SelectselectChoose 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.
ShimmershimmerA 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.
SignaturesignatureDraws 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.
SourcessourcesWhere 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.
Split Textsplit-textSplits 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.
SuggestionssuggestionsPrompts to try next, as pills or as a list of follow-ups. They arrive one after another so the eye reads them in order.
SwitchswitchAn on and off that takes effect at once. The thumb slides across and stretches a little while you hold it.
TabstabsTabs 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.
TaskstasksThe 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.
Text Revealtext-revealText 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.
Text Swaptext-swapChange 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.
Tick Slidertick-sliderA 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.
ToasttoastA 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.
Tool Calltool-callWhat 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.
ToolbartoolbarA 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.
TooltiptooltipA 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.
TurnturnOne 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.
TypewritertypewriterTypes a list of phrases one after another, without the harshness: letters fade in and sharpen instead of popping, the rhythm is a little uneven like a person’s, and a finished phrase fades out as one instead of being backspaced.
Typing Indicatortyping-indicatorSomeone is writing. Three dots that rise and settle in turn inside a bubble, or a small pill that names who is typing.
Video Herovideo-heroA banner for a show or a launch: the episode plays behind the words, blurred to a glow that fades to black at the sides. On top sit a title, a line about it, one clear button that opens the player, and the ways to follow along.
Video Playervideo-playerA silent, looping preview that opens into a near full screen player. The player has the title and a link along the top, one row of controls along the bottom, a line you can scrub, and every key you would expect. It all gets out of the way while you watch.
Voice Notevoice-noteA recorded message in a chat bubble. The waveform fills as it plays, and the play button turns into pause in one movement. Pair it with Voice Recorder and it shows the shape of what was actually said.
Voice Recordervoice-recorderA record button that grows into a voice note as you speak. A warm glow drifts round its edge and swells with your voice, the bars build up beside it, and stopping hands back the audio with its real waveform.