L
leovvx
/
unlumen-ui-docs
/
ui
Files
Code
Info
Button
button
A simple button that animates on hover and tap.
Clipped Circle
clipped-circle
A cursor-following spotlight effect that reveals a soft glowing circle wherever the user moves their mouse inside the container.
Command Menu
command-menu
A composable ⌘K command palette with fuzzy search, custom groups, built-in theme switcher, and animated content reveal.
Copy Button
copy
A copy button component with a variety of styles and animations.
Count Up
count-up
An animated number counter that springs to its target value when it enters the viewport, with support for decimals, separators, and direction.
Cursor
cursor
An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.
Cursor
cursor-primitive
An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.
Copy Button Demo
demo-copy
Demo showing a copy button.
Cursor Demo
demo-cursor
Demo showing a cursor.
Floating Tooltip
floating-tooltip
A floating tooltip component.
Glow Button
glow
A button with an animated conic-gradient glow layer behind it. Supports rotate, pulse, breathe, colorShift, flowHorizontal and static modes.
Glowing Badge
glowing-badge
Badge with an animated pulsing glow dot. Supports status variants: default, success, warning, error, info.
Highlight
highlight
An animated highlight component that tracks elements with smooth spring animations.
Kbd
kbd
Keyboard key and shortcut display component with a soft, minimal key style.
Magnetic Button
magnetic-button
A button that magnetically follows cursor proximity with spring physics. Smoothly snaps back when the cursor leaves.
Math Graph
math-graph
A real-time visual math function builder with animated SVG curves, a pan/zoom canvas, crosshair tooltip, and support for multiple expressions simultaneously.
Orbiting Skills
orbiting-skills
Animated skill badges that orbit a center element. On desktop the ring follows the cursor on hover; on mobile the ring is always visible.
Progressive Blur
progressive-blur
Top and bottom progressive blur overlays that stack multiple backdrop-filter layers to produce a smooth edge-to-transparent blur effect.
Refresh Button
refresh
An icon button that spins on click and supports async refresh callbacks — ideal for reloading component previews or live data.
Scramble Text
scramble-text
A text animation component that reveals characters with a scramble/glitch effect, with imperative controls for manual triggering.
Shimmer Skeleton
shimmer-skeleton
Lightweight loading skeleton with a smooth shimmer sweep animation.
Shimmering Text
shimmering-text
Animated gradient shimmer text with viewport-triggered and repeating animation support.
Slider
slider
Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Built on Radix UI Slider.
Animate Slot
slot
A slot component that allows you to use motion components with any element.
Switch
switch
Animated toggle switch with a spring-driven thumb, smooth fill transition, and optional label.
Tabs
tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Text Reveal
text-reveal
Scroll-driven word-by-word or character-by-character text reveal using Motion's useScroll and useTransform.
Theme Switch
theme-switch
Animated dark / light mode toggle button with a spring-driven sun ↔ moon icon swap and optional View Transition reveal.
Tilt
tilt
A spring-animated 3D tilt wrapper that tracks the cursor inside the element.
Tilt Card
tilt-card
A card with 3D spring tilt, optional floating image, badge and radial shine on hover.
Tooltip Preview
tooltip-preview
Link tooltip that reveals a website preview card with title, description, image and favicon.
Velocity Highlight
velocity-highlight
A highlight effect with smooth spring physics that tracks the active element across hover or click interactions.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Button
button
A simple button that animates on hover and tap.
Clipped Circle
clipped-circle
A cursor-following spotlight effect that reveals a soft glowing circle wherever the user moves their mouse inside the container.
Command Menu
command-menu
A composable ⌘K command palette with fuzzy search, custom groups, built-in theme switcher, and animated content reveal.
Copy Button
copy
A copy button component with a variety of styles and animations.
Count Up
count-up
An animated number counter that springs to its target value when it enters the viewport, with support for decimals, separators, and direction.
Cursor
cursor
An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.
Cursor
cursor-primitive
An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.
Copy Button Demo
demo-copy
Demo showing a copy button.
Cursor Demo
demo-cursor
Demo showing a cursor.
Floating Tooltip
floating-tooltip
A floating tooltip component.
Glow Button
glow
A button with an animated conic-gradient glow layer behind it. Supports rotate, pulse, breathe, colorShift, flowHorizontal and static modes.
Glowing Badge
glowing-badge
Badge with an animated pulsing glow dot. Supports status variants: default, success, warning, error, info.
Highlight
highlight
An animated highlight component that tracks elements with smooth spring animations.
Kbd
kbd
Keyboard key and shortcut display component with a soft, minimal key style.
Magnetic Button
magnetic-button
A button that magnetically follows cursor proximity with spring physics. Smoothly snaps back when the cursor leaves.
Math Graph
math-graph
A real-time visual math function builder with animated SVG curves, a pan/zoom canvas, crosshair tooltip, and support for multiple expressions simultaneously.
Orbiting Skills
orbiting-skills
Animated skill badges that orbit a center element. On desktop the ring follows the cursor on hover; on mobile the ring is always visible.
Progressive Blur
progressive-blur
Top and bottom progressive blur overlays that stack multiple backdrop-filter layers to produce a smooth edge-to-transparent blur effect.
Refresh Button
refresh
An icon button that spins on click and supports async refresh callbacks — ideal for reloading component previews or live data.
Scramble Text
scramble-text
A text animation component that reveals characters with a scramble/glitch effect, with imperative controls for manual triggering.
Shimmer Skeleton
shimmer-skeleton
Lightweight loading skeleton with a smooth shimmer sweep animation.
Shimmering Text
shimmering-text
Animated gradient shimmer text with viewport-triggered and repeating animation support.
Slider
slider
Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Built on Radix UI Slider.
Animate Slot
slot
A slot component that allows you to use motion components with any element.
Switch
switch
Animated toggle switch with a spring-driven thumb, smooth fill transition, and optional label.
Tabs
tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Text Reveal
text-reveal
Scroll-driven word-by-word or character-by-character text reveal using Motion's useScroll and useTransform.
Theme Switch
theme-switch
Animated dark / light mode toggle button with a spring-driven sun ↔ moon icon swap and optional View Transition reveal.
Tilt
tilt
A spring-animated 3D tilt wrapper that tracks the cursor inside the element.
Tilt Card
tilt-card
A card with 3D spring tilt, optional floating image, badge and radial shine on hover.
Tooltip Preview
tooltip-preview
Link tooltip that reveals a website preview card with title, description, image and favicon.
Velocity Highlight
velocity-highlight
A highlight effect with smooth spring physics that tracks the active element across hover or click interactions.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information