L
leovvx
/
unlumen-ui-docs
/
examples
Files
Code
Info
Clipped Circle Demo
demo-clipped-circle
Demo showing a clipped circle spotlight effect on a button, a card, and an image.
Command Menu Demo
demo-command-menu
Demo showing a composable command palette with navigation, component links, and a built-in theme switcher.
Count Up Demo
demo-count-up
Demo showing animated number counters with spring physics.
Floating Tooltip Demo
demo-floating-tooltip
Glow Button Demo
demo-glow
Three glow buttons with different colour palettes and animation modes.
Glowing Badge Demo
demo-glowing-badge
Shows all badge variants with animated glow dots.
Highlight Demo
demo-highlight
Interactive highlight effect with smooth spring animations.
Kbd Demo
demo-kbd
Single keyboard keys and common shortcuts using the Kbd and Shortcut components.
Magnetic Button Demo
demo-magnetic-button
Three magnetic buttons showing different radius and spring configurations.
Math Graph Demo
demo-math-graph
Demo showing an interactive real-time math function visualizer.
Orbiting Skills Demo
demo-orbiting-skills
Demo showing skill badges orbiting a center avatar, with cursor-following on desktop and always-on mobile mode.
Progressive Blur Demo
demo-progressive-blur
Scrollable content with progressive blur overlays at the top and bottom edges.
Refresh Button Demo
demo-refresh
Scramble Text Demo
demo-scramble-text
Interactive demo cycling through phrases with a character-scramble reveal animation.
Shimmer Skeleton Demo
demo-shimmer-skeleton
Card-shaped skeleton layout with shimmer animation.
Shimmering Text Demo
demo-shimmering-text
Cycling shimmer text with AnimatePresence transitions.
Slider Demo
demo-slider
Three sliders showing volume, brightness and opacity controls with click-to-edit values.
Slider Range Demo
demo-slider-range
Range sliders for price, temperature and year selection with dual spring-snapped thumbs.
Slider Steps Demo
demo-slider-steps
Sliders with visible step dots for rating, quality and zoom level selection.
Switch Demo
demo-switch
Four labeled toggle switches showing common settings controls.
Text Reveal Demo
demo-text-reveal
Word-by-word and character-by-character scroll-driven text reveal.
Theme Switch Demo
demo-theme-switch
Animated dark/light mode toggle with spring icon transitions.
Tilt Card Demo
demo-tilt-card
Three tilt cards showcasing badge variants, floating image and custom children.
Tooltip Preview Demo
demo-tooltip-preview
Links showing website preview cards on hover.
Velocity Highlight Demo
demo-velocity-highlight
Interactive highlight with velocity-based scaling effects.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Clipped Circle Demo
demo-clipped-circle
Demo showing a clipped circle spotlight effect on a button, a card, and an image.
Command Menu Demo
demo-command-menu
Demo showing a composable command palette with navigation, component links, and a built-in theme switcher.
Count Up Demo
demo-count-up
Demo showing animated number counters with spring physics.
Floating Tooltip Demo
demo-floating-tooltip
Glow Button Demo
demo-glow
Three glow buttons with different colour palettes and animation modes.
Glowing Badge Demo
demo-glowing-badge
Shows all badge variants with animated glow dots.
Highlight Demo
demo-highlight
Interactive highlight effect with smooth spring animations.
Kbd Demo
demo-kbd
Single keyboard keys and common shortcuts using the Kbd and Shortcut components.
Magnetic Button Demo
demo-magnetic-button
Three magnetic buttons showing different radius and spring configurations.
Math Graph Demo
demo-math-graph
Demo showing an interactive real-time math function visualizer.
Orbiting Skills Demo
demo-orbiting-skills
Demo showing skill badges orbiting a center avatar, with cursor-following on desktop and always-on mobile mode.
Progressive Blur Demo
demo-progressive-blur
Scrollable content with progressive blur overlays at the top and bottom edges.
Refresh Button Demo
demo-refresh
Scramble Text Demo
demo-scramble-text
Interactive demo cycling through phrases with a character-scramble reveal animation.
Shimmer Skeleton Demo
demo-shimmer-skeleton
Card-shaped skeleton layout with shimmer animation.
Shimmering Text Demo
demo-shimmering-text
Cycling shimmer text with AnimatePresence transitions.
Slider Demo
demo-slider
Three sliders showing volume, brightness and opacity controls with click-to-edit values.
Slider Range Demo
demo-slider-range
Range sliders for price, temperature and year selection with dual spring-snapped thumbs.
Slider Steps Demo
demo-slider-steps
Sliders with visible step dots for rating, quality and zoom level selection.
Switch Demo
demo-switch
Four labeled toggle switches showing common settings controls.
Text Reveal Demo
demo-text-reveal
Word-by-word and character-by-character scroll-driven text reveal.
Theme Switch Demo
demo-theme-switch
Animated dark/light mode toggle with spring icon transitions.
Tilt Card Demo
demo-tilt-card
Three tilt cards showcasing badge variants, floating image and custom children.
Tooltip Preview Demo
demo-tooltip-preview
Links showing website preview cards on hover.
Velocity Highlight Demo
demo-velocity-highlight
Interactive highlight with velocity-based scaling effects.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information