@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.

Bento gallery of stills and looping videos in two-tone frames. Videos play only while on screen; tiles cascade in as they scroll into view.

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.

A button with a hover-reactive radial aurora gradient, an animated conic-gradient border, and a rotating shine sweep — powered by animatable CSS custom propert…

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

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

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

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

An interactive dark pill button with 6 orbiting colorful blurred orbs and an aura reveal on hover.

Compact audio-reactive bloop orb shader.

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.

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

An interactive WebGL shader 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.

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

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

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

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

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

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

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.

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.

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

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.

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

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

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.

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.

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

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

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

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.

A draggable row-packed interest picker with emoji burst on select, squircle buttons, and a glass clear action.

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 interactive participant and member avatar selector with dynamic row layout, animated selection badges, quick-add button, and searchable popover.

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.

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

Smooth animated rainbow glow border wrap with drifting color orbs.

Rating component for Space UI.

Resizable component for Space UI.

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

A pinned statement that comes into focus word by word as you scroll: each word rises, sharpens and lights up.

Progressive character or word color/opacity reveal driven by scroll progress.

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.

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

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

Demo showing a bubble background.

Demo showing a gradient background.

The default aurora glow button on a muted backdrop.

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.

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.

A like button with an initial count of 24.

Interactive demo of Pixel Fill Button with different pixel accent colors.

Interactive button with continuous orbiting rainbow blurred orbs revealed dynamically on hover.

Compact bloop orb shader.

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.

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.

Climbing heat tongues with origin and color controls.

Drifting heat field with origin and color controls.

Interactive demo of Liquid Mask Crossfade with cursor trail, noise distortion, refraction, and parallax.

Organic liquid mesh gradient shader background preview with configurable color stops, blur intensity, speed, and particle physics.

Ambient top header glow preset positioned absolute with 3rem blur and 120px visible exposure.

Dynamic mesh gradient shader background preview with swirling waves and grain.

Paper WebGL fragment shader canvas.

Interactive demo of Pixel Reveal Image with real-time scroll matrix wavefront.

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.

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

An accordion component featuring physical separation and corner radius spring transitions upon expanding items.

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