uibrik
AI Blobai-blobA 3D dotted orb for AI states. Click to morph between five shapes.
AI Orbai-orbA glass assistant orb filled with a living mesh gradient of shades that rests, listens, thinks and speaks, reacting to a live voice level.
Amount Padamount-padA money field where each digit drops in and lands, commas slide into place as the number grows, the amount shrinks to fit, and a digit past the limit bounces off in red.
Anagram Shuffleanagram-shuffleLetters rearrange themselves into the next anagram.
Animated Tabsanimated-tabsTabs whose underline or pill springs between tabs, with a highlight that follows the pointer, panels that slide in from the direction you moved and a panel area that eases to each panel's height.
Announcement Pillannouncement-pillA small New pill for above a hero heading, with a band of light along its border and an arrow that grows on hover.
Apple Keyboardapple-keyboardA Magic Keyboard drawn in CSS that mirrors your typing, with keys that sink into their wells and synthesised scissor-switch sounds.
ASCII Fieldascii-fieldA slow field of light drawn as type, glyphs thickening where it brightens; the pointer brings a lens that reshuffles them.
AuroraSlow curtains of light with fine rays that lean toward the cursor.
Avatar Stackavatar-stackOverlapping avatars that fan on hover and spring apart into a named list on a card growing out of the row.
Balloon Buttonballoon-buttonAn inflated, half-balloon button drawn with a WebGL shader, with folds along its seam and a springy dent when pressed.
Beam Networkbeam-networkNodes joined by curved lines with a beam of light that runs from start to end, for any shape of connection.
Blob Selectorblob-selectorA segmented control whose pill pours like liquid between options, stretching and thinning as it travels, with press-and-drag scrubbing.
Blur Revealblur-revealLetters sharpen out of a blur, one after another.
Boarding Passboarding-passA ticket whose stub you pull off: the perforation gives one paper bridge at a time, in WebGL, leaving a fibrous edge and a checked-in mark.
Bookmark Buttonbookmark-buttonA save button whose bookmark fills from the top like a dropped ribbon while the label rolls to Saved.
CausticsSunlight on a pool floor, from light rays bent by moving water; click to drop a ripple.
Code Blockcode-blockA code block that shows plain text at once and colours it in place with on-demand Shiki, with tabs that sync across blocks, marked lines, diffs, collapsing and a copy button.
Collapsing Breadcrumbcollapsing-breadcrumbA breadcrumb that folds its middle crumbs into an ellipsis when space runs out and unfolds them in place on hover or tap, each crumb sliding open to its own width.
Command Menucommand-menuA calm ⌘K command menu: fuzzy and server search, grouped results, nested pages, recents, hotkeys and full keyboard control, with optional filter pills.
Company Cardcompany-cardA business card rendered as a real 3D slab in WebGL: foil and holographic logos, diffraction, glitter, lenticular and pearl finishes, and a pattern seeded by the company name, all lit by the pointer as the card tilts.
Compare Slidercompare-sliderA before-and-after frame that sweeps in on first view, with a smooth draggable divider, keyboard support and labels that step aside.
Context Menucontext-menuA menu that opens where you right-click or long-press, with submenus, checkable items and full keyboard control.
Copy Buttoncopy-buttonA copy button whose two sheets slide together into a check while the label rolls to Copied.
Crumble to Sandcrumble-to-sandThe phrase crumbles into grains that rebuild the next one.
Diagonal Beamsdiagonal-beamsOne soft light falling across sharp, slanted pleats in the dark, its edge dissolving into fine grain.
DialogA modal that grows out of the button that opened it, holds focus, and eases back when another dialog opens on top.
Dither Gradientdither-gradientA bending gradient drawn only in your colours through an ordered dither.
Domino Lettersdomino-lettersLetters topple one into the next like dominoes.
Dot Griddot-gridA quiet grid of dots lit by a drifting wave and by the cursor.
Draggable Lettersdraggable-lettersLetters you can pull apart; they spring home.
Dropdown Menudropdown-menuA menu with icons, shortcuts, checkbox and radio items and submenus, a sliding highlight and full keyboard control.
Elastic Sliderelastic-sliderA slider that stretches like rubber past its ends and springs back.
Expand Buttonexpand-buttonAn icon-only button that springs open to reveal its label on hover or keyboard focus.
Fade In Left to Rightfade-left-to-rightA soft-edged mask reveals the text from left to right.
Falling Lettersfalling-lettersLetters drop in and settle with a small bounce.
Ferrofluid Menuferrofluid-menuA glossy drop of ferrofluid that grows spikes toward the pointer, then pours out droplets that spread into a menu.
Filter Gridfilter-gridTabs over a grid of tiles that can sit in several tabs: tiles in both glide to their new places, leaving ones blur away, newcomers grow in one by one, and the grid's height eases to fit.
Flaming Todosflaming-todosA todo list where finished items burn away in WebGL flames.
Fold Tabsfold-tabsTabs that fold into an accordion when their container gets narrow, with the track, the active pill and every label carried across so the switch reads as one object changing shape.
Fold Toolbarfold-toolbarAn icon button that unfolds into a tray of tools, pushing its neighbours aside, and folds back into whichever tool you pick.
Folder Peekfolder-peekA folder whose file previews rise and fan out on hover, fly out into a list when opened, and that takes files dropped onto it.
Gauge Dialgauge-dialA 240-degree dial whose gradient arc fills behind a spring-driven knob, with lit ticks and a zone badge; drag it or use the arrow keys.
Grain Gradientgrain-gradientColour that folds slowly like silk, finished with film grain.
HalftoneA screen of lit dots: swirling ribbons of light drawn by the size and brightness of each dot.
Halftone Horizonhalftone-horizonAn arched horizon printed in halftone in the dark, where the dots grow with the light until they fuse into a smooth glow.
Hamburger Sheethamburger-sheetA menu button that grows into its own sheet: the shape unfolds from the button's corner while the three lines cross into the close mark.
HighlighterA marker stroke sweeps across a key phrase.
Hold to Confirmhold-to-confirmA destructive-action button that has to be held down; a fill grows across it and drains back if released early.
Horizon Gradienthorizon-gradientBlack fading through deep blue to white in bands that arch like a horizon, breathing slowly.
Hover Cardhover-cardA preview card that opens while you rest on a link and stays while you move into it, so its own links work.
Hover Weighthover-weightLetters grow heavier as the cursor nears them.
Ink Plumeink-plumeA soft plume of black ink rising through white, split at its edges into ultramarine and vermilion, spreading to a haze as it climbs.
Inline Confirminline-confirmA destructive button that splits into Cancel and Confirm in its own footprint, so nothing around it moves.
Inline Editinline-editA label that opens into an input in place, with save and cancel sliding out from its edge, then folds back to the new value.
Jiggle Gridjiggle-gridA home-screen grid you rearrange like on a phone: hold a tile and they all wobble, drag one and the rest spring aside to make room.
KPI Tilekpi-tileA dashboard stat with its change and a sparkline you can scrub, rolling the number to any day.
Large Title Headerlarge-title-headerA large page title that rides up with the content and docks into the top bar as you scroll, moving and scaling as one piece, with the bar filling in behind it.
Lean and Scramblelean-scrambleWords lean and scramble under the cursor.
Light Badgelight-badgeA badge lit from below by a rotating gradient stroke and soft rays.
Light Rainlight-rainThin lines of blue light falling through the dark, with bright glints sliding along them.
Light Streamlight-streamAn hourglass of fine iridescent light streaks with glittering dust, flowing through the dark.
Line-by-line Riseline-riseEach wrapped line rises into place in turn.
Liquid Progressliquid-progressA simple progress bar with a liquid feel: tones of one colour that brighten as it fills, a soft shine, and a front that settles with a small wobble.
Loading Shimmerloading-shimmerA light sweep across text while something loads.
MarqueeAn endless, seamless row of logos, quotes or tags that slows on hover and fades out at the edges.
Mesh Gradientmesh-gradientSix drifting points of colour melting into each other along soft, curling seams.
Mitosis Menumitosis-menuA round button that divides like a cell: each option buds off on a stretching neck of liquid that snaps, then fuses back in when the menu closes.
Morphing Popovermorphing-popoverA button that grows into a panel by springing its real size and corners, so nothing stretches, then folds back into the button.
Notification Centernotification-centerA bell with an unread count that opens every notification in one panel: grouped by day, marked read as you open them, cleared one at a time or all at once.
Notification Stacknotification-stackNotifications that pile up as panes of frosted glass, fan out on hover and blur away when swiped.
Oil Slickoil-slickLight on a film of oil over dark water, folding slowly through blue, gold and coral, shot on grainy film.
On This Pageon-this-pageA section outline where a dot rides a rail with your scroll, subsections fold open as you reach them, and clicking jumps to a section.
OTP Inputotp-inputOne-time code field whose boxes merge and scramble into a pass or fail result.
Outline then Filloutline-fillLetters are drawn as outlines, then filled in.
Page Indicatorpage-indicatorPagination dashes you can click, scrub, step with arrows or type into.
Paper Shredderpaper-shredderDrag a document into the slot and the motor pulls it through, out into strips that sway, drop and crumple onto the pile.
Particle Logoparticle-logoA logo made of dots that gather in from across the frame, part around the pointer like sand and spring back, and scatter outward on a press.
Particle Scatterparticle-scatterEach press breaks the phrase into particles that regroup.
Pixel Botpixel-botA tiny pixel face that cycles through animated expressions.
Pixel Burstpixel-burstSquare pixels burst from the centre or the edges in a checkerboard that pales into loose, flickering pixels, with a ring pulsing out now and then.
Plucked Curveplucked-curveText rides a curve that wobbles like a plucked string.
PopoverA panel that grows out of its button, flips when there's no room, and keeps its arrow pointed at the button.
ProgressProgress as a bar, a ring, a segmented breakdown and a list of steps. Values ease on a spring so fast updates never stutter, numbers roll, and finishing draws a check.
Progress Dotsprogress-dotsPagination dots where the active one stretches into a pill that fills as it plays, and the row opens into labelled steps on hover. Also comes as full-width story segments.
Prompt Inputprompt-inputAn AI prompt box that grows as you type, with file attachments, a model picker, slash commands, @mentions, a send button that turns into stop, and voice dictation whose words settle in as they are heard.
Pull Toward Cursorpull-to-cursorLetters lean toward the cursor like a magnet.
Redact and Revealredact-revealBlack bars redact a line, then lift to reveal the next.
Ripple to Stillripple-to-stillText ripples like water, then settles.
Rolling Wordrolling-wordOne word rolls to the next like a drum.
Rust Textrust-textBrushed steel type that rusts while you watch and flakes away, polished back to a shine wherever the pointer passes.
Scatter Textscatter-textPhrases shatter into particles that regroup into the next phrase.
Scramble Textscramble-textLetters resolve from random characters out of a soft blur, one after another.
Scramble to Wordscramble-to-wordA split-flap board scrambles to the next word.
Scroll to Highlightscroll-highlightWords light up as you scroll past them.
Scrub Numberscrub-numberA number field you drag sideways to change: a tick ruler opens out from the pointer with a magnified patch under the marker, notches every fifth tick, soft limits, faster steps on a quick drag, a finer step on Shift, typing on click and reset on double-click.
Scrub Timelinescrub-timelineA week-by-week ruler that swells under the pointer like a dock. Milestones pull the playhead in as you drag, ticks click past like detents, and a date pill grows into the milestone's card.
Section Pillsection-pillA floating pill that names the section you're reading, with a ring for how far down the page you are, and opens into the full list, carrying the current title to its row.
Segmented Controlsegmented-controlA segmented control whose pill slides between options on a spring, squishes when pressed and can be dragged across the segments like the one on iOS.
SendFile upload that fills, then launches a paper plane out of the card.
Share Menushare-menuA share button that flips open into a pill of options, resizing to fit.
Silk Clothsilk-clothA sheet of satin rippling in a light breeze, with a long sheen along every fold.
Silk Vortexsilk-vortexLiquid glass streaming outward from a dark void: glossy folds mapped through a colour gradient.
Siri Orbsiri-orbA glass assistant orb, black above and clear below, holding a twisting helix of light that splits into colour at the rim and winds wider while listening.
SkeletonA skeleton measured from the real layout: one bar per wrapped line of text, a box for every image and control, one shimmer across them all, and a top-to-bottom reveal when the content arrives.
Slot-machine Lettersslot-lettersEach letter spins like a reel and lands on the next word.
Smart Addresssmart-addressOne address field that splits a pasted address into street, city, region, postcode and country, flying each word from where it was pasted into its own field.
Soft Buttonsoft-buttonA plain button made with care: a gentle top-to-bottom gradient, a faint inner highlight and shade, and a crisp border, in primary, secondary and accent.
Soft Cloudssoft-cloudsA soft summer sky shot on grainy film, with billowing clouds drifting slowly on the wind.
SpinnerA small family of loading indicators (ring, radial, dots, bars, orbit) drawn on one grid with one stroke and tempo.
Split Buttonsplit-buttonA primary button with a menu of alternative actions; the chosen one rolls into the main label.
Split Panessplit-panesResizable panes that follow the pointer exactly, snap into an icon rail when dragged past their minimum, and fold on their own when the container gets small.
Status Stampstatus-stampAn ink stamp slams down: approved, in review, rejected.
Stepper Buttonstepper-buttonAn add-to-cart button that reshapes into a quantity stepper in the same pill.
Streak Calendarstreak-calendarAn activity heatmap whose days lift under the pointer or arrow keys, with a tooltip that glides between them, a today cell that fills when logged, and a beat for a new record.
Strike Todosstrike-todosA plain to-do list: checking an item draws a line through it, and unchecking wipes the line away.
Swap Fieldsswap-fieldsA from/to pair whose fields trade places along opposite arcs when you press swap, carrying their values with them while the slot labels hand over.
Tactile Toggletactile-toggleA single switch whose knob squishes under the finger, drags like the real thing and springs home on release.
Tactile Togglestactile-togglesA settings list whose switches squish under the finger, drag like the real thing, sweep a faint tint across the row as they turn on, and pause the rows they override.
Tag Inputtag-inputA field that turns typed or pasted text into chips that pop in and shrink out, with Backspace to select and remove, arrow keys to move between chips and a nudge for duplicates.
Theme Switchtheme-switchSwitches the page theme: the sun pulls in its rays and is eclipsed into a moon while the new theme spreads out from the button.
Tick Navtick-navA section list on a ruler whose ticks swell like a dock under the pointer, sliding each label out with its tick.
ToastToasts that stack, fan out on hover, swipe away, and follow a promise from loading to done in one toast.
TooltipA quiet tooltip that waits before the first one shows, then swaps instantly between neighbours in a toolbar.
Topographic Linestopographic-linesContour lines of a slowly shifting landscape, like a survey map; the pointer raises a hill the lines ring around.
Tree Viewtree-viewA file and folder tree with folders that ease open, guide lines, a sliding selection and full tree keyboard control.
Type Fightertype-fighterA text field where each typed glyph flies in like a comet, or is written by pen.
TypewriterText typed with a human rhythm, mistakes included.
Viscosity Menuviscosity-menuA dot that pours into a menu panel like a drop of liquid.
Voronoi Cellsvoronoi-cellsA living mesh of cells with waves of light hopping through it like signals across a network; the pointer lights the cells it passes.
Waitlist Inputwaitlist-inputAn email field with its button inside that shrinks to a spinner, then settles into a confirmation in the same space.
Zoom Pastzoom-pastWords fly toward you and the next one arrives behind.