VLLNT UI · Famille de composants
Composants Utility
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 storyLisible par les agents
Votre agent IA peut aussi les installer.
Le registre est expose comme donnees structurees, afin que les agents de code choisissent le bon composant sans scraper le HTML.
Questions frequentes
- 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.