@spaceui

Interactive showcase of service and audience craft cards with custom gradient icons.

Interactive showcase of core philosophy and value cards with custom gradient icons.

Interactive draggable infinite canvas community wall with radial bloom distribution, card patterns, collision avoidance, tilt controls, and note submission mod…

3D cylindrical spiral carousel in WebGL2 with curved cards, axial directional blur, and matrix dither pattern.

ElevenLabs-inspired landing page block with a live audio-reactive orb hero.

Interactive 3D stacked deck quiz game block with True/False feedback, live score and dialog summary.

Interactive proximity-reactive grid canvas that dynamically rounds and insets cells on cursor movement with custom shape controls.

Vertical WebGL lens gallery. Scroll-linked image planes from Immersive Lens.

Smooth-minimum signed distance field WebGL2 carousel with liquid fusing cards that pull organic metaball strands when separated.

Continuous image strip rendered to an offscreen texture and sampled through a thick optical glass lens shader with radial refraction and chromatic aberration.

Interactive demo showcasing the Sign In Page 1 component.

Content publication metrics including total articles, words written, reader messages, and reading time.

Comprehensive reader engagement showcase with top articles, interactive emoji reaction counters, category tags, and changelog updates.

Interactive metric overview cards with floating spring emoji decorations and semantic color accents.

Interactive GitHub contribution activity heatmap graph with metrics for stars, forks, and commits.

Lighthouse audit results dashboard featuring mobile & desktop scores with radar chart visuals.

An interactive background featuring smoothly animated gradient bubbles, creating a playful, dynamic, and visually engaging backdrop.

A background component featuring a subtle yet engaging animated gradient effect, smoothly transitioning colors to enhance visual depth.

Compact audio-reactive bloop orb shader.

Interactive dual-engine generating loader orb with revolving chromatic depth in CSS keyframes and HTML5 Canvas.

Procedural matrix pixel grid loader with Tailwind styling, motion presets, and companion status banner.

Audio-reactive smooth orb with a WebGPU fluid simulation.

Interactive Canvas 3D particle loader orbs featuring 9 procedural cognitive states.

Interactive volumetric cloud material rendered as a full-bleed shader surface.

WebGPU fbm heat field with ember and hot tints along a moving boundary.

Paper Shaders WebGL2 canvas driven by a fragment shader and live uniforms.

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

WebGPU silk mesh gradient. Three colors, warp, grain.

A fluid polymorphic grid with physics-based velocity spring pill tabs, cinematic staggered reflow transitions, and memory-optimized layout shifts.

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

Input that grows and shrinks its type to fit the available width, with locale number formatting.

Extended avatar components with badges, indicators, and logos.

Avatar group stacking and overlapping system.

Tactile squircle badge component with Base UI polymorphic rendering and dynamic curvature morphing.

Progressive, buttery smooth word, character, or line-by-line blur reveal animation with viewport triggers.

Spring accordion that splits rounded rows when a panel opens.

Tactile squircle button and badge components featuring dynamic curvature morphing on hover from the original portfolio design.

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

A copy-to-clipboard button with animated icon transition.

Data Grid component for Space UI.

Data Grid Column Filter component for Space UI.

Data Grid Column Header component for Space UI.

Data Grid Column Visibility component for Space UI.

Data Grid Pagination component for Space UI.

Data Grid Scroll Area component for Space UI.

Data Grid Table component for Space UI.

Data Grid Table Dnd component for Space UI.

Data Grid Table Dnd Rows component for Space UI.

Data Grid Table Virtual component for Space UI.

Date Selector component for Space UI.

3D ring carousel with drag, snap, auto-rotate, and a live control panel.

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

Event Calendar component for Space UI.

Event Calendar Agenda View component for Space UI.

Event Calendar Content component for Space UI.

Event Calendar Dnd component for Space UI.

Event Calendar Event component for Space UI.

Event Calendar I18n component for Space UI.

Utility and configuration helper for Event Calendar Lib.

Event Calendar Month View component for Space UI.

Event Calendar Nav component for Space UI.

Event Calendar Recurrence component for Space UI.

Event Calendar Resource View component for Space UI.

Event Calendar Time Grid component for Space UI.

Event Calendar Types component for Space UI.

Filters component for Space UI.

Full-screen countdown timer with fluid rolling digits, play/pause and reset controls, and auto-loop.

Interactive fluid wave simulation with chromatic refraction and Bayer dither blending between two textures.

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

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

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

An interactive GitHub ecosystem showcase featuring stars, forks, and commits KPI cards with floating particles and a 52-week contribution heatmap matrix.

A glassmorphic button built on top of Button Squircle — backdrop blur, layered inset highlights and a hover shine sweep.

Two draggable blobs that merge into one liquid shape via an SVG gooey filter.

A round trigger that gooey-morphs into an info panel on hover.

A round trigger that gooey-expands upward into a rich content card on hover.

A tooltip bubble that mouse-follows and gooey-connects to its trigger button on hover.

Kinetic tumbler reel of usernames, handles, or subdomains past a prefix that decelerates and settles with momentum.

Icon Stack component for Space UI.

An adaptive image component that dynamically switches between light and dark mode sources using standard img elements.

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

Composable Item primitive with media, content, title, and description slots for lists and rows.

Kanban component for Space UI.

Liquid metal shader as a border wrap around any registry component.

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

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

An animated morphing icon transition wrapper supporting motion presets like blur-scale, rotate-scale, flip, and spring.

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

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

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

Dynamic character-level FLIP morphing animation between words or phrases with accessible screen-reader support.

A fun notification list with animated stacking and cards that expand as you interact.

Phone Input component for Space UI.

A playful list for pinning and unpinning items, with smooth animated transitions as items move between groups.

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

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

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

Rating component for Space UI.

Resizable component for Space UI.

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

Scrollspy component for Space UI.

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

Fluid WebGPU silk mesh gradient wrapper with preset themes and CSS fallback.

Tactile slide-to-action control with spring physics and inertia confirmation.

Liquid fill slider with viscosity, momentum, and tilt.

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

Sortable component for Space UI.

An interactive status badge with animated indicator, status color mapping, and inline or stacked layout modes.

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

Renders every Unicode emoji in a string as an image sized to the surrounding text. Includes Animoji, the same for animated emoji styles.

View-transition theme toggle with circle, rectangle, polygon, and blur reveals.

A scrubber drawn as a row of tick marks, with a real range input underneath for keyboard and screen reader support.

Timeline component for Space UI.

Animated knockout bracket with round navigation and live match states.

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

An interactive list component projecting a floating WebGL preview with inertial momentum mesh-warping and pixel block dissolve crossfading.

Typography preloader that cycles greetings then wipes away with a curved SVG mask.

Demo showing a bubble background.

Demo showing a gradient background.

Compact bloop orb shader.

Revolving chromatic loader orb available in CSS and Canvas engines.

Live matrix loader with customizable speed, motion presets, radius, gap, ghost dots, and Tailwind colors.

All 6 matrix geometric states and live loop displayed simultaneously on a single row.

Tailwind color class styling with automatic tonal opacity gradations.

Assistant loading card with state switching, contextual details, and shimmer progress.

Audio-reactive smooth orb.

Particles tracing tilted orbital rings around a ghosted sphere.

A dotted globe swept by a rotating scan band.

A point-cloud sphere permuted by successive quarter-turn slice rotations.

Latitude rings breathing in and out on two detuned sine waves.

A drifting node graph with proximity links and travelling signals.

Three helical strands braiding around a ghosted sphere.

A rippling multi-lane ribbon wrapped over a sphere.

A face-on ring pulsing with a slow radial ripple.

A dotted outline morphing between circle, triangle and square.

Interactive cloud material surface.

Climbing heat tongues with origin and color controls.

Drifting heat field with origin and color controls.

Paper WebGL fragment shader canvas.

Composite WebGPU shader blending silky mesh gradients with rising thermodynamic heat flares.

Warped three-color silk field with grain.

Image gallery with fluid spring velocity pill indicator and adaptive columns reflow.

Adaptive density grid acting as category reflow tabs with fluid physics spring pill and card rendering.

Inline text with emoji rendered as animated images sized to the surrounding font.

The same emoji rendered through all three animated catalogs.

Emoji written as JS unicode escape sequences, including a two-code-point flag, resolved the same as pasted characters.

BlurRevealText's renderSegment hook piped through Animoji, cycling both the phrase and the emoji provider on every reveal.

Amount field that scales to fit its container.

Visual style variants for the squircle badge component.

Standard sizing scale for the squircle badge component from extra small to large.

Showcase of tactile squircle badges with icons and polymorphic link and button rendering.

Interactive demo for Blur Reveal Text featuring customizable token splitting, blur depth, stagger delays, and directions with automatic 5s loop replay.

Spring accordion with icons and badge copy.

Showcase of tactile squircle buttons with curvature morphing across default, secondary, outline, accent, glass, and ghost variants.

Tactile squircle button standard sizing scale from extra small to large.

Tactile squircle icon button sizing scale from small to large.

Perceptually uniform color generator and interactive swatch palette using @usespaceui/gradients.

Data grid with pagination

Data grid with cell border

Data grid with dense layout

Data grid without table borders

Data grid with striped rows

Data grid with auto width table layout

Data grid with row selection

Data grid with expandable rows

Data grid with sub table

Data grid with column icons

Data grid with sortable columns

Data grid with movable columns

Data grid with draggable columns

Data grid with draggable rows

Data grid with column resizing

Data grid with pinnable columns

Data grid with sticky header

Data grid with column controls

Data grid with card container

Data grid with column visibility controls

Data grid with loading skeleton

Data grid with CRUD features

Data grid with CRUD in frame container

Data grid with column totals footer

Data grid with summary stats footer

Data grid with per-column aggregate footer

Data grid with local infinite scroll

Data grid with remote infinite scroll

Data grid with row pinning support

Basic date selector

Date selector with popover

Date selector with dialog

Date selector with dropdown menu

3D carousel with official Tweakpane controls.

A hand-drawn arrow and handwritten label pointing at a pricing plan, replaying on a loop.

Event calendar with all views and live settings

Event calendar with resource view for room bookings

Month calendar with event CRUD in one dialog: open from an empty day, an event, or Add event, commit via apiRef. Title, color, start, duration, all-day fields.…

Event calendar with custom event chips

Event calendar with drag-to-book appointments

Basic file upload

Avatar upload

Basic drag and drop file upload

Gallery file upload

Progress file upload

Table file upload

Image upload

Image upload with sorting.

Card file upload.

Cover image upload.

Filters with various field types

Filters with input validation

Filters with custom trigger button

Filters with small size controls

Filters with large size controls

Filters with custom controls

Filters with data grid

Filters with data grid and async mode

Filters with i18n support

Filters with virtualized large lists

Filters with prefetched async options

Filters with async server-side search

Interactive fluid rolling digits countdown timer.

Interactive demo of Fluid Crossfade with fluid simulation, chromatic refraction, and Bayer dithering.

Interactive demo of Fluid Distortion Image with real-time cursor impulse ripples.

Interactive demo of Fluid Dither Crossfade with real-time fluid simulation and Bayer dithering.

Large type fading into a stacked frost blur along the bottom edge.

Pure GitHub activity component with meta controls for username, shape, header, and legend.

Layout configuration displaying KPI stat metric cards positioned above the contribution activity graph.

Layout configuration displaying the contribution activity graph on top with KPI stat cards positioned below.

Icon-only glass buttons over a gradient backdrop.

An icon glass button that widens and blur-reveals a text label on hover.

A text + icon glass CTA button over a gradient backdrop.

Drag the two blobs close together to see them merge.

Hover the info button to see it gooey-morph into a status card.

Hover the info button to see it gooey-expand into a rich content card.

Hover the button to see the tooltip follow your cursor and gooey-connect.

Hero handle tumbler reel with ryna.me prefix.

Interactive trigger handle reel with custom role names and a tactile roll button.

Layered isometric icon

Responsive icon stack sizes

Semantic icon stack colors

Icon stack with badge overlay

Shadcn empty state illustration

Icon stack in shadcn item

Demonstrates ImageDark automatically switching between light and dark logo assets with zero layout shift.

Demonstrates ImageDark with fill layout inside an aspect-ratio container.

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

Kanban board with placeholder overlay

Kanban board with dynamic overlay

Kanban board with frame columns

Minimal kanban with stacked frame

Feature roadmap kanban with progress