Xzero UI
Pro library

A little out of the ordinary

Source you keep. Every state, both themes, and motion that makes sense.

101 items

M

Morph nav Pro

A navigation bar that morphs into rich menus, search, and a compact state as one surface.

D

Dock Pro

A floating tool dock with a gliding label, a springy selection, and trays that grow out of it.

W

Wallet stack Pro

Fan a stack of cards and lift one out to see its activity.

L

Liquid tab bar Pro

Tabs with a lens selection that slides between them, swaps labels cleanly, and fills in icons as it passes.

N

Now playing Pro

Grow a mini player into the full player in one continuous morph.

P

Photo grid Pro

Pinch through zoom levels and open any photo straight from its cell.

C

Control center Pro

Workspace quick settings: tiles that morph into detail, a duration dial, and rubber-banded meters.

C

Cover flow Pro

A depth rail of images you can throw, with soft grounded shadows and a quiet reflection.

A

Activity rings Pro

Daily goals as tick rings that sweep, count up, and trace a second lap past 100%.

S

Stretch refresh Pro

Pull a feed down and a line stretches to tell you when to let go.

O

Orbit menu Pro

Hold a button and its actions orbit out, ready to pick with a drag.

T

Time dial Pro

Spin a dial to pick an hour and see which team cities are at work.

B

Booking pill Pro

One pill that reshapes through party size, date, time, and a ticket.

V

Voice recorder Pro

Record with a live waveform, review and scrub, then send the take into the thread.

L

Lightbox gallery Pro

A masonry grid where photos zoom from their slot into a viewer you can swipe, pinch, and drag away.

M

Morph loader Pro

Tiny loaders that morph between shapes and fold into a check or a cross when done.

V

Voice orb Pro

A voice mode orb that listens, thinks, and speaks, with a live transcript and call controls.

A

Action morph Pro

A floating button that morphs into a quick-action menu, then an inline form, then back with a check.

S

Share sheet Pro

A Share button that opens into a panel with copy link, access level, channels, and people to send to.

P

Product gallery Pro

A product gallery with a hover magnifier, gliding thumbnails, and color and size variants that crossfade photos.

S

Sheet stack Pro

Nested sheets that stack with depth, drag to dismiss, and become stacked dialogs on wide screens.

D

Dot grid Pro

A dot field that bulges around the cursor like a lens and ripples from every click.

H

Holo card Pro

A member card that tilts toward you with a holographic foil and flips to its back.

K

Keycap keyboard Pro

Mechanical keycaps that sink and light up as you type, with the text above the board.

S

Slot text Free

Text and numbers that spin into their new value on staggered slot machine reels.

S

Sticker peel Pro

Peel stickers off a surface with a real curl, move them around, and stick them back down.

P

Page curl Pro

A small magazine you read by dragging page corners, with a real fold, lit curl, and flick to turn.

I

Image trail Pro

Moving the pointer leaves a curated trail of photos that pop in, lean, and fade away.

B

Black hole Pro

A delete transition that pulls the chosen items into a tiny singularity while the rest of the list bends around it; undo spins them back out.

I

Ink fluid Pro

A real time fluid simulation behind your hero: the cursor stirs soft ink that swirls, settles and fades; calm when left alone.

G

Glass menu Pro

A glass action menu whose trigger morphs into the panel, with a highlight pill that glides between rows, one in-place submenu, and full keyboard support.

G

Glass segmented Pro

A glass segmented control whose liquid indicator stretches between segments and can be dragged and flung.

G

Glass card Pro

A glass info panel over a photo whose rim catches a pointer-following highlight while the card tilts; tap to morph it into a detail sheet.

G

Glass tab bar Pro

A floating Liquid Glass tab bar that refracts what scrolls beneath it, with a glass lens that glides, magnifies and can be dragged between tabs, and an optional search bubble; it compacts on scroll down.

C

Card to article Pro

Story cards that open into full articles with one seamless morph and shrink back into their exact slot when dragged down.

S

Skeleton morph Pro

Loading skeletons that grow into the real content, block by block, instead of swapping.

O

Orbit logos Pro

An integrations showcase with brand logos orbiting your product mark on tilted rings. Hover or focus one to rest the orbit, draw a connection, and see what it does.

S

Sand text Pro

A headline made of sand that pours into the letters, crumbles where the cursor digs, and heals itself.

G

Gravity well Pro

A grid of tiles that bends toward the cursor like spacetime, with a click that sends a shockwave through it.

D

Data flow Pro

Data flow illustration. Sources (app, database, events) are on the left, a processing core with a live count sits in the middle, and destinations (warehouse, dashboard, alerts) are on the right. Records leave as hollow dots and travel curved paths. In the core they turn into solid accent squares, then fan out to each destination; alerts receives about every third record.

P

Payment flow Pro

A card tap goes to a processor, then the network, then the bank and back with authorization, then settlement; each hop lights up with a status label and the amount travels as a chip.

P

Prize wheel Pro

A referral or promo prize wheel you flick to spin, with real angular momentum, a flexible pointer that ticks against each peg, weighted segments set by the host, a slow suspenseful settle, and the won segment lifting into a reward card with a copyable code.

D

Date reel Pro

A 3D wheel date and time picker (like iOS reels) with momentum scrolling, snapping, curved perspective, and full keyboard support.

M

Model training Pro

Training data batches feed a small neural net diagram whose connections strengthen, a loss curve descends beside it, and an evaluation check turns green at the end.

M

Multi-region failover Pro

Animated multi-region failover on a 2.5D stage: users stream requests through a global load balancer to two regions; the primary degrades, fails three health checks, traffic shifts smoothly to the healthy region, then it recovers, passes three checks and traffic ramps back to an even split.

V

Vector search Pro

Documents drop onto a tilted embedding plane and fold into points that cluster by topic; the index links neighbours, a query is typed, embedded and lowered onto the plane, a signal hops along the graph toward it, and a widening ring lights the nearest documents with connecting lines, similarity scores and a ranked list.

A

Agent timeline Pro

A compact timeline of one orchestrated agent run: the orchestrator and its subagents share a time axis, handoffs draw in between rows, and a playhead replays thinking, tool calls and waiting while the header counts time, tokens and cost. Hover a span for what it did, or click it to trace its handoff path.

T

Typewriter terminal Pro

A terminal that types a scripted CLI session with a seeded human cadence, colors the shell syntax, and streams output lines, progress bars and spinners, with a scrubber, play/pause and replay controls.

C

Context window Pro

An AI context window as a grid of 200 cells: the system prompt, tools, files, summary and messages fill it in order, a threshold row marks where compaction starts, and sending a message, attaching a file or compacting shows exactly how much still fits.

A

Agent loop Pro

An illustration of the agent loop: gather context, take action, verify, repeat, with a bright head circling three stations around the model.

M

Mixture of experts Pro

An illustration of mixture of experts routing: each token is scored by a router, travels to its top experts, and their outputs merge into the token's result.

S

Speculative decoding Pro

An illustration of speculative decoding: a fast draft model guesses a few tokens, the target model checks them in one pass, and accepted guesses join the answer.

A

Agent status Pro

A compact live status pill for a running AI agent: the agent's mark in a live ring, the current activity and an elapsed timer, opening into the steps so far.

T

Tool call Pro

A tool call row for agent transcripts: the tool's mark and the call in plain words, a live state while it runs, and the input and output a click away, with approval and retry when needed.

A

Agent plan Pro

The plan an agent writes before it acts: edit, reorder or add steps while it is a draft, then watch it work through them as a live checklist.

P

Prompt cache Pro

An animated explainer for prompt caching: the shared prefix of each request is cached once, later requests read it back, and the cost and time saved add up.

R

Reasoning tree Pro

An illustration of tree search over thoughts: candidates are scored, weak branches fade, the best expand, and the winning path from question to answer draws in.

R

Reasoning block Pro

The collapsible thinking block of an AI reply. While the model thinks, a shimmering label counts the seconds and the latest reasoning streams underneath. When it finishes, it folds to "Thought for 7s" and opens to show the full reasoning as calm steps with headings.

S

Source cards Pro

A row of cited sources under an AI answer where cards stream in with real site marks while the model searches, the overflow collapses into a stack of favicons, hovering lifts a preview with the passage, and an inline [n] citation highlights its card.

M

Model card Pro

A model details card where switching models rolls every price, limit and score in place, a token slider estimates monthly cost live, and benchmark bars show each model's rank on hover. Compare crossfades to a side-by-side table against any rival with the better values marked, and the card never changes size.

A

AI workflow Pro

A Linear-style AI workflow card where a Gmail trigger, a Claude step, a branch and Slack and Linear actions sit on one hairline rail, and a test run glides down it, opening each step's output inline. Steps are added from a compact command menu with real app marks.

C

Code suggestion Pro

An AI code edit suggestion where the model's proposed changes stream into a small editor panel as inline diff hunks, and you accept or reject each one, or all at once with Cmd+Enter. Accepted hunks fold into the file with a smooth height change.

G

Ghost text Pro

An inline AI autocomplete where muted ghost text continues your sentence exactly at the caret and Tab turns it solid in place. Cmd+Right takes it one word at a time, Escape fades it away, and a calm chip shows the model behind it.

I

Image generation Pro

An image generation card where four images resolve as a pixel mosaic, from coarse colour blocks to full detail under a soft shimmer, each with its own progress ring. Pick one to upscale with a sweeping pixel band, vary or download it, with real provider marks and a built-in simulation.

D

Dictation button Pro

A chat composer with voice input, where the mic springs into a recording pill with a smooth live waveform, a timer, and cancel and insert buttons. Words stream into the field as you speak, muted until the recognizer settles them.

S

Speech player Pro

A read-aloud player for AI replies. The Read aloud button in the message's action row turns into a compact player with play, a scrubbable progress bar, speed and a voice picker, and a highlight follows the spoken word through the reply, karaoke style.

M

Meeting summary Pro

An AI meeting notes card: the header shows the Google Meet or Zoom mark, the attendees and the duration. Summary, Decisions and Action items stream in after a short summarizing pass. Hover any line to see the transcript quote it came from, then check off action items or send them to Linear or Notion.

R

Reply draft Pro

An AI email reply drafter where Claude streams a reply under a received Gmail message. Quick replies steer a fresh draft, tone and length rewrite it with a single crossfade, and you can edit the finished draft before you insert it.

A

Agent handoff Pro

A support conversation where an AI assistant hands off to a person. When it transfers, a card shows the summary it passes to the team and the typical wait. The person then joins and takes over, and a thin timeline on the left marks each step.

P

PII redaction Pro

A guardrail card where personal data is redacted before the prompt reaches the model. Scan marks each name, email, phone number and card with its type and swaps it for a placeholder like [EMAIL_1]. The safe prompt travels to Claude, and the reply comes back with the original values put back for the person.

R

Response feedback Pro

A feedback control for AI replies where thumbs down opens an inline panel with reason chips and an optional note, thumbs up fills and asks what was good, and a submit shows a short thank-you before folding back into the row.

L

LLM cost calculator Pro

A pricing calculator for LLM workloads. Set tokens per request, requests per day and prompt caching, and eight current models re-rank by monthly cost. Bars glide and prices roll as you drag.

P

Provider keys Pro

A settings card for bring-your-own-key AI products. Each provider row shows its real mark, the masked key, a status and when the key was last used. You can reveal a key for five seconds, copy, rotate or remove it with undo. Adding or rotating a key opens an inline form that checks the format as you type, then tests the connection before saving.

G

Generation stats Pro

A live stats strip for a streaming LLM response where time to first token, speed with a sparkline, output tokens and cost count up in tabular numerals beside the model's real mark, then settle and open into a latency and token cost breakdown.

A

AI translate Pro

A message card where picking a language streams the AI translation in place, sentence by sentence over the dimmed original, with a detected-language chip, a Show original toggle and a status line credited to the model's mark.

T

TL;DR toggle Pro

An article card with a Full, Summary and Key points switch and a length slider. Switching streams an AI summary in place of the article as the card's height springs to fit, and each key point links back to the paragraph it came from, which gets scrolled to and highlighted.

C

Connector setup Pro

A "Connect your tools" card for an AI assistant. Each app connects inline: it redirects, authorizes and runs a first sync with a progress hairline, then lists the scopes it was granted and offers Disconnect with an inline confirm.

S

Smart form fill Pro

A paste-to-fill form card where AI reads an email signature or messy notes and fills a contact field by field. Each value flashes in with a confidence dot, its source lights up in the pasted text, low-confidence guesses ask for review, and Undo puts the old values back.

E

Enrich column Pro

An AI enrichment column for a data table, where one prompt runs down every row and each cell shimmers while it works, then settles into a value with its source or a failure you can retry.

T

Ticket router Pro

A support ticket router where messages from Gmail, Intercom, Slack and Zendesk come in one at a time. An AI classifier labels each one with intent, sentiment and confidence, and the ticket moves into a team lane with an assignee. Low confidence tickets wait in a review lane, and one click there routes them to the suggested team.

A

Ask your data Pro

A natural language to chart card: you ask a question, PostgreSQL streams into a collapsible, syntax highlighted panel, the query runs with a rolling row count, and the answer builds as stacked bars, lines or a table, with a one line insight streamed in underneath.

A

Agent cursor Pro

A live document where Claude edits like a collaborator. Its labeled cursor comes out of its avatar, selects a paragraph and streams in a rewrite, adds a heading and fixes a typo, while a teammate's cursor reads along. Changes stay tinted until someone accepts or undoes them from a floating review bar.

P

Provider status Pro

A status card for the AI providers your product depends on. Each row shows the provider's real mark, its health as an icon and label, p50 latency and a 30-day uptime bar with a tooltip for each day. An incident row expands into its timeline of updates, and the card checks again on a visible countdown.

T

Training run Pro

A fine-tuning job card where a live train and validation loss curve draws across a fixed step axis that doubles as the epoch progress bar. It shows the learning rate, elapsed time, ETA and the latest evals and checkpoints, has Pause and Cancel while it runs, and ends in results with a Deploy button.

A

AI command Pro

A Cmd+K command palette with an AI mode. Search pages and actions, or press Tab to ask a question: the answer streams inside the palette with numbered sources, and the next steps it suggests, like filing a Linear issue or opening a Notion doc, run straight from the list.

S

Starter prompts Pro

A greeting and a grid of starter cards for the empty state of an AI app. The cards are grouped into Write, Code, Analyze and Plan tabs, and a shuffle swaps them with a short staggered crossfade. Picking a card fills the composer, and cards that use a connected app show its mark (Gmail, GitHub, Notion, Linear, Google Calendar).

A

AI mascot Pro

A small assistant character, a soft pebble with pill eyes and a companion dot, that shows what the AI is doing. It breathes and glances when idle, leans in to listen, looks up while the dot orbits its head, reads along the line it writes, squints with a sparkle when done and shakes once with worried brows on an error.

I

Image reveal Pro

An image generation canvas where a soft, blurred preview made from the image's own colors sharpens top to bottom behind a soft-edged band. It works the way ChatGPT, Midjourney and Gemini show images forming, with fine film grain, a translucent progress pill and calm queued and error states.

A

AI spark Pro

A brand-quality animated spark mark. Four tapered rays and four lighter diagonals breathe at rest, ripple while thinking, pulse like a heartbeat while writing, then gather and settle when done. Every status change blends from the pose the mark is already in.

P

Pixel mascot Pro

A pixel-art robot that shows what an AI assistant is doing. It idles, thinks, types, celebrates and errors in frame-stepped sprite animations, and stays crisp at every integer size from 24px to 192px.

G

Ghost mascot Pro

A floating ghost mascot whose soft sheet ripples at the hem while it hovers. It blinks when idle, turns toward you to listen, fades a little translucent while thinking, draws a tiny pen line while writing, smiles with a sparkle when done and wobbles once on an error.

C

Cube mascot Pro

An isometric cube mascot where three shaded faces and a painted-on face show what the assistant is doing. It turns a quarter turn in eased steps while thinking, prints lines onto the floor while writing, settles with a sparkle when done, and shakes once on error.

T

Tone tuner Pro

A brand voice card where two sliders (formality and detail) and Friendly, Confident and Empathetic chips rewrite a customer reply. Each changed sentence crossfades in place, new words can be highlighted against the original, and Copy takes the current version.

U

Upgrade prompt Pro

An upgrade nudge for the moment someone hits a limit. It shows a usage meter at 50 of 50 AI credits, a rolling price with a monthly and yearly toggle, three concrete unlocks with real model marks, and Upgrade or Maybe later. Upgrading leads into a success state with the new limits, and the card never changes size between states.

R

Referral card Pro

A give-and-get referral card where people copy or share their invite link, invite friends by email as chips, and watch invites move from invited to signed up to earned, with the credit total counting up and a milestone reward unlocking.

T

Trial banner Pro

A trial status banner where a ring counts down the days left, the copy names what the workspace loses, and the upgrade path is one click away. It comes as a slim banner, a sidebar card or a header pill. It shifts to a warning tone in the last days, has expired and upgraded states, and folds into the pill when dismissed or snoozed.

T

Team switcher Pro

A workspace switcher like Linear, Vercel or Slack. The trigger shows the current workspace's logo and plan. The menu has search, your role in each workspace and a Cmd+1 to 9 shortcut for each, and lets you create or join a workspace inline. A highlight glides between rows, and switching crossfades the trigger through a short loading state.

L

Live visitors Pro

A realtime visitors card where the live count rolls digit by digit, new arrivals ping in on a dotted world map, the top pages reorder with bars, and signups and upgrades tick in with country flags.

S

Social proof toast Pro

A stack of social proof notifications for landing and pricing pages, where recent trials, upgrades and verified purchases from people and companies arrive every few seconds. The stack pauses and fans out on hover, and visitors can dismiss any toast.

I

Install snippet Pro

A "get started in 30 seconds" card where framework tabs, three numbered steps and highlighted snippets take a developer from install to first event. Generate key wipes a fresh API key into the placeholder in place.

L

Link unfurl Pro

A composer where pasting a URL shows a loading shimmer on the link, then unfurls it into a rich preview card with title, image and favicon in one morph, which can be collapsed back to the inline link or removed.