Components

Extended Avatar components with rings, status badges, indicators, icons, and a built-in procedural fallback powered by the SpaceUI Avatars API.

A component for rendering a group of avatars, supporting different stacking directions and action buttons.

Stacked, masked backdrop-filter layers that frost content along an edge.

Spring accordion that splits rounded rows when a panel opens.

An interactive accordion with spring motion where the expanded item physically detaches with animated gaps and rounded corners.

A continuous slider with a filled track, tick dots, and a draggable thumb.

Liquid fill slider. Corner, viscosity, momentum, tilt.

A scrubber drawn as a row of tick marks, backed by a real range input.

Elastic toggle switch with velocity-based organic stretch and spring return physics.

View Transition API theme switch with circle, blur, rectangle, and polygon reveals.

Smooth drag-and-drop sortable team list with generative avatars and spring reordering.

Tactile checklist with spring checkmarks, animated strike-through lines, and completion progress.

Interactive team roster selection list with generative avatars, spring hover pill, and multi-select state.

An interactive participant and member avatar selector with dynamic row layout, animated selection badges, quick-add button, and searchable popover.

Tactile slide-to-confirm action slider with inertia spring physics.

Flawless math-driven squircle masking and geometry rendering for modern UIs using CSS Houdini.

A draggable row-packed interest picker with an emoji burst on select and a shake-to-explode clear action.

An expandable voice chat pill with participant avatars, animated speaking indicators, and a smooth pill-to-panel transition.

Tactile squircle badge components featuring dynamic curvature morphing on hover with polymorphic Base UI render support.

Elastic command bar that expands seamlessly from passive state to active input with action trigger.

Adaptive aspect ratio surface with constant-area morphing for any child element, card, or media.

Adaptive search pill that expands smoothly from a compact button into a full input field.

A compact avatar group for showing online and offline users, with smooth animated transitions when presence changes.

Displays scheduled events across day, week, and month views, making it easy for users to create and manage appointments.

Animated knockout bracket with round navigation, live and finished matches, and elbow connectors.

Displays a real-time status indicator with a pulsing dot and color coding to show whether a service or user is online or busy.

An interactive GitHub ecosystem showcase featuring pure 52-week contribution heatmap matrix content with live fetch for users and repositories.

Floating section scrollbar that tracks the active heading as you scroll.

Liquid metal shader as a border wrap. Put any registry component inside.

Smooth animated rainbow glow border wrap with drifting color orbs. Put any registry component inside.

Fluid WebGPU silk mesh gradient wrapper. Wrap avatars, badges, buttons, and cards with theme presets and CSS fallback.

Transforms one vector icon smoothly into another with fluid shape morphing animations when state changes.

Perceptually uniform color generator and interactive swatch palette with organic gooey fluid morph and one-click copy.

A fluid polymorphic grid featuring velocity-driven spring pill tabs, staggered layout reflow animations, and built-in memory optimization.

3D ring of video worlds. Drag, wheel, or snap. Open the gear panel to change radius, tilt, and auto-rotate.

A hand-drawn arrow that draws itself next to a handwritten label, replaying on a loop.

A gallery of drag-to-merge and hover-morph gooey micro-interactions built with SVG filters.

Provides a quick-access bar where users can pin, organize, and reorder favorite items, documents, or shortcuts.

Allows users to enter international phone numbers with automatic country flag detection, dial codes, and formatted digits.

A refined upload surface with an animated glowing beam border, dynamic radial feedback, file extension badges, and multi-state progress indicators.

Allows users to quickly choose single dates or time ranges using interactive timeline scrubbers and preset shortcut buttons.

Allows users to submit ratings or view average customer scores using interactive star icons with half-star precision.

Input that binary-searches a font size so the value always fills the available width, with locale number formats.

Provides a filter bar with badges and active tags, allowing users to narrow down search results by multiple criteria simultaneously.

Allows users to adjust side-by-side workspace panels by dragging divider handles to fit their screen needs.

Tracks the user’s scroll position on the page and automatically highlights the corresponding link in the table of contents.

Displays large datasets in an interactive table where users can sort, filter, paginate, and resize columns to analyze data efficiently.

Allows users to reorder items in a list or grid by dragging and dropping them with smooth layout animations.

Displays tasks across draggable columns, allowing users to organize projects, track progress stages, and reorder cards intuitively.

Displays a vertical sequence of events, milestone dates, and activity logs connected by a timeline line.

Displays an interactive feed of incoming notifications with unread indicators, timestamps, and swipe-to-dismiss actions.

Displays an overlapping cluster of icons or avatars that expands smoothly when hovered to reveal every individual item.

An adaptive image component that dynamically switches between light and dark mode sources using standard HTML img elements with zero layout shift and no hydration mismatch.

Tactile squircle button components featuring dynamic curvature morphing on hover with polymorphic Base UI render support.

A glassmorphic extension of Button Squircle — backdrop blur, layered highlights and a hover shine sweep.

An interactive button whose background fills with square matrix pixels radiating from the cursor entry point on hover.

A button with a hover-reactive radial aurora gradient, an animated conic-gradient border, and a rotating shine sweep.

An interactive dark pill button featuring 6 orbiting colorful blurred orbs and a blur reveal transition on hover.

A like button with burst particles, a ripple ring, a spring-animated heart, and a smooth NumberFlow count transition.

Kinetic tumbler reel that spins a vertical reel of names past a prefix, highlighting the centered handle as it decelerates and settles with momentum.

A countdown timer with fluid rolling digits, play/pause and reset controls, and auto-loop built with NumberFlow and Motion.

Greeting cycle preloader that exits with a curved SVG wipe. Replay from the demo.

A progressive word, character, or line-by-line blur reveal animation with customizable motion vectors and viewport triggers.

Seamless character-level FLIP morphing animation between words or phrases with pause-on-hover capability.

Per-character 3D flip animation with a sine-eased stagger wave across the text.

Line-by-line blur reveal with a gooey SVG edge filter, driven by GSAP SplitText — plays immediately, on scroll, or scrubbed to scroll position.

Progressive character-by-character and word-by-word text reveal driven by scroll progress.

A pinned statement that comes into focus word by word as you scroll. Each word rises, sharpens from a blur and lights up in reading order.

Renders every Unicode emoji in a string as an image sized to the surrounding text.

Renders every Unicode emoji in a string as an animated image sized to the surrounding text.

A text input whose content scatters into drifting canvas grains on submit.

A typography shader component that materializes text out of pixel matrix noise with neon contour highlights on scroll.

9 procedural Canvas 3D particle loader orbs representing AI cognitive states — working, searching, solving, listening, connecting, weaving, composing, breathing, and shaping.

Matrix pixel grid loader with Tailwind color support, spring motion presets, and assistant status cards.

Audio-reactive fluid WebGL orb. Swap ambient, microphone, or file input, change the texture, and toggle grain.

Compact assistant orb with listen, think, and speak states, voice palettes, and audio input.

Renders floating animated bubbles across the background that smoothly move and drift away when users move their mouse.

Creates a smoothly animating multi-color gradient background that shifts colors gently behind your page content.

Volumetric cloud material. Color the sky, sun, and shadows, then fly the camera with mouse or touch.

WebGPU heat field or climbing licks. Logo cyan on a navy ember.

WebGPU silk mesh. Three colors, warp, grain. Animation on by default.

WebGPU single-pass composite shader fusing silky mesh warp gradients and rising thermodynamic heat flares.

Paper Shaders WebGL2 canvas. Pass a fragment shader and uniforms; the mount compiles, resizes, and ticks time.

A WebGL image component with dynamic pixel matrix wave and customizable neon accent border on scroll.

An interactive WebGL image component with cover UV mapping and dynamic cursor fluid-distortion ripples using data textures.

Dual-pass WebGL fluid simulation with chromatic wave refraction and Bayer 4x4 matrix ordered dither crossfading.

A dual-pass WebGL shader component featuring real-time Navier-Stokes fluid pressure simulation and Bayer 4x4 matrix ordered dithering crossfade.

A WebGL shader component featuring interactive liquid cursor mask crossfade with dynamic trail, refraction, and parallax effects.

Dynamic WebGL mesh gradient shader background featuring fluid swirls, configurable color stops, distortion turbulence, and film grain overlay.

Organic liquid mesh gradient shader background blending orbiting particle clusters through a high-radius Gaussian blur diffusion filter.