VLLNT UI · Component family
Utility components
Utility components are the helpers and effects that finish an interface — spinners, skeletons, copy buttons, QR codes, and visual flourishes like glass, particles, and shimmer. Small pieces that glue the rest together.
Background Effects
Decorative animated backgrounds — grid, dot, particle, meteor, and sparkle effects that add ambient motion behind any React section.
Animated Grid Pattern
Decorative grid background with squares that fade in and out at random.
2 storiesDot Pattern
Decorative dotted background pattern built from token colors.
2 storiesMeteors
Decorative meteor shower of streaks falling across the background.
2 storiesParticles
Floating particle field that drifts gently in the background.
2 storiesSparkles
Decorative twinkling sparkles scattered behind content.
2 storiesSurface & Border Effects
Frosted glass surfaces, animated borders, spotlights, and progressive blur for premium card and panel styling.
Glass Card
Frosted-glass card surface with backdrop blur and a translucent background.
1 storyGlass Panel
Frosted-glass surface for floating chrome above a canvas — dock panels, hovering toolbars, and transient overlays — with a translucent background and soft border.
1 storyLiquid Glass
Glass surface with an animated liquid gradient sheen.
1 storyBorder Beam
Animated accent beam that travels around the border of a highlighted surface.
2 storiesShine Border
Wrapper that draws an animated gradient border around its content.
2 storiesSpotlight Card
Card with a radial spotlight that follows the pointer.
1 storyProgressive Blur
Progressive blur overlay that fades focus toward one edge.
2 storiesMotion & Hover Interactions
Magnetic buttons, 3D card flips, shimmer sheens, animated counters, marquees, and loading spinners that bring pointer-driven motion to your UI.
Card Flip
Card that flips in 3D between a front and back face.
2 storiesTilt Card
Card that tilts in 3D toward the pointer for a parallax hover.
1 storyMagnetic
Wrapper that pulls its content toward the pointer for a magnetic effect.
2 storiesMagnetic Button
Button that drifts toward the pointer for a magnetic hover effect.
2 storiesShimmer Button
Button with a light sheen that sweeps across its surface.
2 storiesShiny Button
Button with a glossy gradient sheen that sweeps on a loop.
1 storyCursor
Custom cursor follower that trails the pointer.
2 storiesFloating Action Button
Fixed-position action button for primary actions.
1 storyAnimated Text
Staggered text reveal for headings, pull quotes, and short supporting copy.
12 storiesNumber Ticker
Animated number transitions for stats, KPIs, and compact numeric callouts.
2 storiesMarquee
Continuously scrolling content lane for badges, logos, and status chips.
5 storiesSpinner
Animated loading spinner indicator.
1 storyCanvas Workspace & Collaboration
Pan-and-zoom canvas shells, connectors, object handles, and real-time presence cursors for building spatial, multiplayer workspaces.
Canvas Shell
Layout shell for canvas workspaces with top bar, left rail, right dock, and bottom slot regions.
1 storyCanvas View
Interactive pan-and-zoom viewport for spatial surfaces with keyboard, wheel, and overlay support.
1 storyInfinite Plane
Tiled pannable backdrop for the canvas with dot or grid pattern that drifts with the viewport.
4 storiesAnchor Port
Port marker for object inputs, outputs, and bidirectional links on the canvas.
1 storyConnector Edge
Curved edge between canvas objects with optional inline label state.
1 storyObject Handle
Drag/reposition affordance for spatial objects that need a calm grab target.
1 storyGroup Hull
Durable boundary wrapper for related runtime objects sharing context or ownership.
1 storyContext Lens
Vignette overlay that dims the canvas outside a circular focus region.
4 storiesMulti Select Lasso
Selection rectangle overlay for canvas multi-select gestures.
4 storiesPlayback Ghost
Translucent overlay marking where a canvas object was at a previous timestamp during playback.
4 storiesAlert Pulse
Pulsing ring overlay for alerting canvas objects, with severity tones.
4 storiesState Badge Overlay
State chip pinned to a canvas object's corner — idle, queued, running, complete, failed, stopped.
4 storiesComment Pin
Anchored discussion pin rendered at canvas coordinates with author + unread badge.
4 storiesLive Cursor
Remote user's cursor rendered at canvas coordinates with name + status chip.
4 storiesSelection Presence
Dashed-border overlay marking what another user has selected on the canvas.
4 storiesThread Bubble
Expanded discussion bubble for an anchored canvas comment thread.
4 storiesLayout Helpers
Aspect-ratio boxes, resizable panels, custom scroll areas, tables of contents, and text truncation for structuring page layouts.
Aspect Ratio
Constrains content to a specified aspect ratio.
1 storyResizable
Resizable panel layout with draggable handles.
1 storyScroll Area
Custom scrollable area with styled scrollbars.
1 storyTable Of Contents
Auto-generated table of contents from page headings.
2 storiesTable Of Contents Panel
Side panel rendering a table of contents for page navigation.
2 storiesTruncated Text
Single-line text that truncates with an ellipsis when it exceeds a configurable max width.
1 storyTheming & Providers
Light/dark theme toggles, preset switchers, and context providers for theming and internationalization across your app.
Lang Provider
Context provider for language and internationalization.
1 storyTheme Preset Provider
Applies the persisted theme preset on mount and injects a no-flash script so the saved preset is set before paint.
1 storyTheme Provider
Context provider for light/dark theme switching.
1 storyTheme Switcher
Compact swatch row for switching between built-in theme presets, kept in sync with every other consumer on the page.
1 storyTheme Toggle
Button to toggle between light and dark themes.
1 storyReadable by agents
Your AI agent can install these too.
The registry is exposed as structured data, so coding agents pick the right component without scraping HTML.
Frequently asked
- What's in the utility family?
- Indicators and helpers — spinners, skeletons, copy buttons, QR codes — plus visual effects like glass surfaces, particles, shimmer, and magnetic interactions.