@geturui

Design tokens

Inline alert that stays in the page flow in six tones, as a floating card or full-width banner; it unrolls with a spring, each tone icon moves once, and dismis…

Small uppercase status label in nine tones, with an optional pulsing dot for live states and a lock glyph on Pro.

Right-click or long-press menu that opens at the pointer: it scales from the nearest corner, items stagger in, a highlight glides between rows and submenus sli…

Avatar in six sizes with an image to initials to icon fallback chain, presence, verified and logo corners, plus a stack that fans out on hover; photos blur up …

Four ways to present a post — editorial cover, compact list, featured series and author-led quote — each with its own motion moment, from layered parallax to a…

Cover card with a drawn type specimen whose layers drift under the pointer, plus category, excerpt and byline.

List of posts with reading-progress rings, a highlight that glides between rows and arrow-key navigation.

Split card for a multi-part series: step through parts while the art and copy crossfade in the direction of travel.

Byline-first card with a pull quote, a bookmark that pops and ticks its count, and a copy-link action.

Draggable glass sheet with snap points; release velocity is projected forward to pick the detent and the scrim fades with the sheet's height.

Single-open accordion whose panels open on a weighted height spring while the body rises out of a blur and the plus turns into a cross.

Location trail with chevron, slash or dot separators, a home crumb and long middles collapsed into a menu; in button style a hover pill glides between crumbs.

Pill button in twelve styles and five sizes with a spring press, leading and trailing icons, inline links whose underline draws in, a Spinner loading state, an…

Month grid for a single date or a range, one or two months wide; months slide in with a blur in the direction of travel and the range band sweeps out from the …

Card number, expiry and CVC in one well: digits group as you type, the brand is detected from the prefix and its mark flips in, focus advances field to field, …

Four message threads — support with typing indicator, group chat with reactions, file and voice attachments, and delivery receipts — where every new message sp…

Support conversation with grouped bubbles, quick-reply chips and a typing indicator before each answer.

Group chat with grouped senders, toggleable reaction pills whose counts roll and an inline reaction picker.

File message with a ring-progress download and a voice note with a seekable waveform and speed control.

Direct-message thread where sent messages animate through sending, sent, delivered and read, with retry on failure.

Native checkbox whose tick draws itself with a spring, morphs to a dash when indeterminate, and groups under a select-all parent.

Inline numbered citation chips that open a source card with a spring on hover or focus, plus a sources list that highlights the cited item.

AI-style code block with filename header, copy button, line numbers, line highlights and a tiny highlighter; long code collapses behind a height spring.

Type-to-filter combobox: matched text lights up in volt, a create row offers what you typed, async results load behind a spinner, and an empty state wobbles in…

A ⌘K palette on frosted glass with fuzzy search and grouped results; a spring highlight glides to the active row as you arrow through.

Icon button that copies a value to the clipboard and morphs its glyph into a check with a scale-and-blur swap.

Large rounded call-to-action panel on a faded dot grid with a headline, two buttons and a soft volt spotlight that trails the cursor.

Date and range pickers on a sunken trigger: a popover holds the calendar, presets like Last 7 days and Apply/Cancel, plus a segmented date field whose digits r…

Accessible base modal with a featured icon, four widths and stacked phone actions; it springs in over a blurred scrim and turns into a drag-to-dismiss bottom s…

A macOS-style dock whose icons swell on springs as the cursor nears; labels rise above and the active dot glides between apps.

Donut whose arcs sweep in on springs; hovering a segment or legend row expands it and swaps the rolling centre total for that segment's share.

A side panel that springs in from the left or right over a blurred scrim; drag it toward its edge, press Escape or click outside to dismiss.

Menu button with button, icon, avatar or account-card triggers, an account header or filtering search, sections, checkbox and radio rows and submenus; it sprin…

FAQ section with a heading, a spring accordion of questions and a "still have questions" contact card whose avatar stack pops in.

Bento grid of six features where each tile runs a small live micro-animation — a typing command, a theme toggle, a moving focus ring, a rolling counter, spring…

Label, control and hint line with ids wired for screen readers; errors shake the control once and blur in under it.

Collapsible file tree where folders spring open, chevrons rotate, indent guides light up for the active folder and a selection pill glides between rows.

Site footer with a brand blurb, four link columns, a newsletter field that swaps to an inline success state, and a base row with legal links and a pulsing stat…

Horizontal funnel whose centred bars grow in stage by stage, with conversion from the top and drop-off labelled between stages.

Marketing hero with a pulsing announcement pill, a word-by-word headline with a volt-marked word, two CTAs, a copyable install command and a floating product s…

Text field on a sunken well in three sizes with a volt focus halo, leading icon, joined text, select and button add-ons, a help tooltip, a clear button and a s…

App connect grid, single-integration consent and sync health cards — optimistic connect, spring permission switches and a failed sync that heals on retry.

Grid of apps with All and Connected filters, a connect flow that spins then springs to Connected, and layout-animated filtering.

Two linked marks, a permissions list with spring switches and locked required scopes, and an authorize flow that ends in a drawn check.

Sync health with run-history bars, a failure notice that collapses on retry, a live record counter and an auto-sync switch.

Four hand-drawn SVG line charts — multi-series, single metric, period comparison and annotated steps — that reveal left to right, morph with springs and read o…

Up to four series, volt first and the rest neutral or dashed; legend toggles rescale the axis with a spring morph and the crosshair reads every visible line.

One metric under a volt gradient with labelled peak and low markers, an average guide, a glowing latest point and a headline that follows the crosshair.

This period in solid volt against the last in dashed neutral, the gap shaded, with week, month and quarter tabs that morph both lines together.

A step line for values that change in jumps, a dashed plan limit and numbered notes that pop a callout on hover or focus and step with arrow keys.

Customer logo strip of text wordmarks in varied weights and spacing, as an endless marquee or a bordered grid where each logo lifts to reveal a caption on hove…

Infinite horizontal scroller with faded edges that loops any content, runs in either direction and pauses on hover.

Masonry wall of tiles with mixed aspect ratios that keeps source order left to right, with category chips that filter the wall and tiles that glide into their …

User and assistant chat bubbles that spring in, group consecutive messages and reveal copy, retry and feedback actions on hover or focus.

A button that confirms in place: its label and icon morph through pending, done or error (Add to cart → Added → back) while the width springs to fit, plus a Sw…

Number field with steppers on both sides or stacked on the right, min/max/step, full keyboard control and press-and-hold that speeds up; digits roll to each ne…

Number that rolls each digit on its own spring reel, staggered left to right, when it scrolls into view or the value changes.

A multi-view modal that opens from the button that launched it and returns there on close; the panel height springs between views and content crossfades throug…

A one-time-code field where a focus ring glides between slots and digits roll in; wrong codes shake, right ones draw a check.

Pure page-window engine plus numbered, compact, card-footer and carousel-dot paginators; the volt marker glides to the active page and numbers slide as the win…

Password field with an eye toggle that blinks and draws its slash, a four-segment strength meter that springs in, and an optional requirements checklist.

Click-to-open panel anchored to its trigger that scales from the trigger edge with a spring and flips above or below to stay in the viewport.

Pricing table with a volt billing toggle, a seat slider with volume-discount tiers and plan prices that roll digit by digit whenever billing or seats change; t…

Chat composer with an auto-growing textarea, model picker and attachment chips; the send button morphs into a stop button while a reply streams.

Single-choice group with roving focus and a selected dot that glides between options on a spring; card mode turns options into tiles a volt ring slides across.

Slider with a volt fill, step ticks and a bar-shaped thumb that springs to each step and stretches while you drag.

Five review cards — rating summary, standout quote, review composer, compact list and photo review — with count-ups, star pops, rolling vote counts and a share…

Average that counts up over a star histogram whose bars grow in and filter the list.

Single verified review with popping stars, a body that springs open with Read more, and a helpful toggle.

Star radio group with hover preview and spring pop, quick tags, counted text box and a thank-you crossfade.

Dense rows with star lines and optimistic helpful votes whose counts roll.

Review with a drawn photo strip; a thumbnail grows into an in-card viewer with arrow keys and Escape.

Single-choice select on the field well with avatars, status dots, icons, groups and an optional search box; a volt highlight glides between options and the pan…

100% stacked bars or areas showing each series' share per period; toggling between them re-stacks with springs, with a period tooltip and a legend that hides s…

Sign-up card with a GitHub button, an email field that validates and shakes, an animated password-strength meter, a stateful submit and a success state that mo…

Four feed posts — text, photo grid, poll and link preview — with optimistic toggles, rolling counts, a shared-layout photo viewer and results that count up.

Text post with optimistic like, repost and bookmark: icons pop, the like bursts and counts roll.

Photo post whose drawn grid tiles expand into a viewer with a shared-layout morph, arrow paging and Escape to close.

Poll post where voting grows the result bars and counts percentages up, with your choice marked and undo.

Post with an expandable body and a rich link preview whose drawn image drifts on hover, plus like and copy link.

KPI cards with rolling numbers, an up/down delta badge and a sparkline that draws in, with a crosshair on hover or arrow keys.

Loading indicator as a ring, dots or equaliser bars in five sizes; it announces itself as a status and slows to a pulse for reduced motion.

Four metric cards — headline KPI, scrubbable sparkline, goal ring and two-period comparison — with count-ups, redrawn lines, springing arcs and bars.

Headline figure that counts up with its delta, and a breakdown that springs open into a stacked bar.

Period tabs redraw the line; pointer or arrow keys scrub to any point and the figure crossfades.

Progress ring and percentage spring to each logged step; milestones tick and the goal swaps to a done state.

Metric tabs swap two period bars that spring to new lengths while the delta crossfades.

Four headline numbers that roll in digit by digit, each with a sparkline that draws itself, fills its area and drops an end dot when scrolled into view.

Progress steps, horizontal or vertical, with number, icon, dot or bar markers; connectors fill with a spring, numbers morph into drawn checks and the current s…

Toggle switch whose thumb slides on a stiff spring and stretches while pressed.

Three settings cards built on a springy switch — notification preferences with a saved cue, plan features with dependent options and a save bar, and privacy to…

Email and push preferences in labelled groups; the thumb stretches on press and a Saved chip blurs in after each change.

Workspace feature toggles where child options unlock with their parent, a locked row names its plan, and a save bar springs in once anything changes.

Privacy and security switches with a Protected or At risk badge; turning off a sensitive one opens an inline confirmation first.

Segmented tabs in pill, volt and underline styles; a shared spring indicator glides to the active tab and resizes to fit it.

Chips with dots, avatars, flags, icons, counts and remove buttons, selectable singly or in sets; a removed chip blurs out while its neighbours slide closed.

Text field that turns entries into chips on Enter, comma or paste, validates each one, and springs new chips in while removed ones slide out.

Multi-select whose picks become chips in the field: chips pop in with a spring and fold into “+N”, options tick a drawn checkbox, arrows walk the chips and Bac…

Wall of quote cards with initials avatars: two marquee rows drifting in opposite directions, or a masonry layout whose cards blur up into view.

Four text effects: a word-by-word blur reveal with a volt underline, a shimmer sweep, a glyph scramble and a rotating word swap.

Multi-line field on the sunken well that grows with a spring between min and max rows, with a ring-gauge character counter, a resize handle and a toolbar slot.

Three appearance controls — a light/dark/system segmented switch with a sliding thumb, an appearance card with live mini previews, and an accent and density pi…

Light, dark and system options with a thumb that slides between them and an icon that turns as it lands; text or icon-only.

Theme cards with tiny app windows drawn in each theme's real tokens, a check that pops onto the chosen one and a stepped text-size slider.

Accent swatches and a density control beside a live preview whose rows re-space with a layout spring and repaint in the chosen accent.

A sun/moon button that flips the whole page between dark and light with a View Transition reveal from the button, as a circle or staggered slats.

A card that tilts in 3D toward the pointer on a spring, with a glare that tracks the cursor and layers that float at different depths.

Imperative toasts that stack in the corner, fan out on hover, update in place from loading to done, and blur away on dismiss.

Renders an AI reply token by token from a string or async stream, fading each chunk in behind a blinking caret, with safe markdown.

Hover and focus label rendered in a portal: it scales in from its trigger on a soft spring, flips to the side with room, carries a title, description, arrow an…

Three account menus — an avatar dropdown with workspace switcher and theme row, a sidebar footer menu that opens upward, and a searchable command-style profile…

Top-bar avatar menu with a workspace switcher whose check glides between rows, a light/dark/system row and shortcut hints.

User button for the bottom of a sidebar; the menu opens upward with a seat meter, and ArrowUp opens it on the last item.

Profile menu with a search field: type to filter grouped actions, a highlight slides between rows and every action shows its shortcut.

Three dashboard welcome cards — today at a glance, onboarding checklist and what’s new — with staggered count-ups, one-at-a-time steps and a swipeable release …

Time-aware greeting, today’s numbers counting up in a stagger and an up-next strip you can step through.

One step open at a time; completing a step ticks, fills its segment and advances, then the card celebrates.

Swipeable release carousel with drawn art; a Pro feature turns the button into an ember upgrade.