030 / Components
Every component, running.
Each tile is the component itself, not a recording. Play with it here, then open it for usage, props and its motion signature. 25 are free and install with one command.
30 components
A pill that rises after a destructive action with a draining countdown ring.
A product tour whose scrim cutout springs between targets, morphing size and concentric radius while the tooltip re-anchors.
Drag a numeric label to scrub its value, with pointer lock, fine and coarse modifiers, keyboard steps and rolling tabular digits.
A grouped list where switching the grouping moves rows into their new groups with shared-layout motion and rolling counts.
One keyboard focus ring that springs between fields, resizing and re-radiusing to each target.
A layout primitive that exposes outer, padding and inner radius as CSS variables so nested corners stay concentric.
Disclosures whose height springs open with no overshoot, content fading in as the height lands and the chevron turning on the same spring.
Avatar and AvatarGroup on Base UI Avatar: images fade in from a 4px blur once loaded so initials never flash; overlapping stacks with a cut-out ring spread apart on hover; the overflow count rolls.
A status or count chip.
A Base UI button whose press scale depends on its width, whose label swaps with y + blur while the width springs, and whose loading spinner overlays the label so the width never changes.
Label, control and one message line on Base UI Field.
A link preview that opens after a 300ms dwell and stays open while the pointer travels into it.
A Base UI text input whose focus is the border alone.
A keycap that presses down when the real key does: the face drops 1px onto its base and springs back on release.
Tabular digits that roll in the direction of change: a 9 → 0 carry rolls forward, a value that changes mid-roll redirects, new places fade in while the rest slide over.
A panel that opens from its trigger's transform-origin with a 5px directional offset, closes at half the distance in 150ms, and reverses mid-flight.
A progress bar on Base UI Progress: the bar rides a spring and its value rolls; an unknown length sweeps with an accelerate–decelerate curve and hands over to the bar when a value arrives.
A blur that ramps from 0 to 20px over 80px toward an edge, from stacked masked backdrop layers, for headers, bottom bars and composers.
Radios whose dot scales out from the centre on a snappy spring, and radio cards whose selected border travels between cards.
A native scroller with a thin themed overlay scrollbar that thickens under the pointer, and edge fades that appear only when there is more to scroll.
A search input whose clear button pops in once there is text, whose ⌘K hint fades out on focus, and whose loading spinner sits in the icon slot so nothing shifts.
A single-choice segmented control whose thumb glides to the selection on a spring.
Loading placeholders with one page-wide shimmer: every skeleton shares a viewport-space highlight and one phase, so a single band sweeps across all of them.
A quarter arc turning on a faint ring, the eased.dev status-badge mark.
Superellipse corners: CSS corner-shape: superellipse(K) where supported, an identical measured clip-path elsewhere, with a hairline ring that follows the shape.
Tabs with a gliding indicator (underline or pill) and panels that cross-fade 6px in the direction of travel while their container's height springs.
Change a label, status or short value with y + blur, and spring the width to fit, so neighbours glide instead of jumping.
A textarea that grows with its text on a smooth height spring instead of jumping a line at a time.
Toggle buttons sharing one highlight: it travels between items in single mode, and pressed neighbours fuse into one shape in multiple mode.
A short label that waits 400ms for the first trigger, then follows the pointer instantly across its neighbours.