---
name: "@unlumen-ui"
slug: "unlumen-ui"
description: "Fully animated, open-source component registry built with React, TypeScript, Tailwind CSS, and Motion (motion/react), installable via the shadcn CLI. Ships 27+ components across categories: buttons (Copy Button, Glow Button, Magnetic Button, Refresh Button), text effects (Count Up, Scramble Text, Shimmering Text, Text Reveal), UI primitives (Clipped Circle, Command Menu, Cursor, Floating Tooltip, Glowing Badge, Kbd, Math Graph, Orbiting Skills, Progressive Blur, Shimmer Skeleton, Slider, Switch, Theme Switch, Tilt Card, Tooltip Preview, Velocity Highlight), and backgrounds (Pixel Background). Free tier plus one-time Pro purchase. Use for: adding polished, animation-forward primitive components without a heavy runtime dependency."
category: "Animated components"
tags: ["aesthetic", "ai", "animation", "backgrounds", "buttons", "cards", "charts", "dashboard", "design-system", "forms", "glassmorphism", "hooks", "icons", "loaders", "marketing", "media", "navigation", "overlays", "pro-available", "retro", "text-effects", "theming"]
framework: "react"
license: null
author: "wicki-leonard-emf"
website: "https://ui.unlumen.com"
github: "https://github.com/wicki-leonard-emf/unlumen-ui-pv"
registry: "https://ui.unlumen.com/r/registry.json"
pro: true
pro_url: "https://ui.unlumen.com/pricing"
github_stars: null
component_count: 225
generated_at: "2026-07-28T08:59:05.895Z"
---

# @unlumen-ui

Fully animated, open-source component registry built with React, TypeScript, Tailwind CSS, and Motion (motion/react), installable via the shadcn CLI. Ships 27+ components across categories: buttons (Copy Button, Glow Button, Magnetic Button, Refresh Button), text effects (Count Up, Scramble Text, Shimmering Text, Text Reveal), UI primitives (Clipped Circle, Command Menu, Cursor, Floating Tooltip, Glowing Badge, Kbd, Math Graph, Orbiting Skills, Progressive Blur, Shimmer Skeleton, Slider, Switch, Theme Switch, Tilt Card, Tooltip Preview, Velocity Highlight), and backgrounds (Pixel Background). Free tier plus one-time Pro purchase. Use for: adding polished, animation-forward primitive components without a heavy runtime dependency.

## Links

- Website: https://ui.unlumen.com
- GitHub: https://github.com/wicki-leonard-emf/unlumen-ui-pv
- Registry JSON: https://ui.unlumen.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/unlumen-ui
- This file: https://sh4dcn.vercel.app/md/unlumen-ui.md
- Pro / pricing: https://ui.unlumen.com/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ui.unlumen.com/r/registry.json
pnpm dlx shadcn@latest add https://ui.unlumen.com/r/registry.json
bunx shadcn@latest add https://ui.unlumen.com/r/registry.json
# clone the source repo
git clone https://github.com/wicki-leonard-emf/unlumen-ui-pv.git
# fetch the raw registry index
curl -s https://ui.unlumen.com/r/registry.json
```

## Components (225)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:style | — | `npx shadcn@latest add https://ui.unlumen.com/r/index.json` |
| gravity-stars | registry:ui | A background component featuring a subtle yet engaging animated gravity stars effect. | `npx shadcn@latest add https://ui.unlumen.com/r/gravity-stars.json` |
| pixel | registry:ui | An interactive background featuring tiny pixel particles that ripple outward from the center on hover, then fade away. | `npx shadcn@latest add https://ui.unlumen.com/r/pixel.json` |
| pixel-liquid-bg | registry:ui | A full Navier-Stokes fluid simulation background with pixelation, Bayer dithering, film-grain noise, and auto-demo mode. Reacts to cursor movement. | `npx shadcn@latest add https://ui.unlumen.com/r/pixel-liquid-bg.json` |
| square-pattern | registry:ui | An interactive grid background where squares randomly light up with colors and react to hover. | `npx shadcn@latest add https://ui.unlumen.com/r/square-pattern.json` |
| wave-background | registry:ui | A morphing SVG wave divider that transitions between sections. Supports scroll-driven morphing and ambient looping animation modes. | `npx shadcn@latest add https://ui.unlumen.com/r/wave-background.json` |
| copy | registry:ui | A copy button component with a variety of styles and animations. | `npx shadcn@latest add https://ui.unlumen.com/r/copy.json` |
| glow | registry:ui | A button with an animated conic-gradient glow layer behind it. Supports rotate, pulse, breathe, colorShift, flowHorizontal and static modes. | `npx shadcn@latest add https://ui.unlumen.com/r/glow.json` |
| refresh | registry:ui | An icon button that spins on click and supports async refresh callbacks — ideal for reloading component previews or live data. | `npx shadcn@latest add https://ui.unlumen.com/r/refresh.json` |
| cards-view-icon | registry:ui | Animated icon where four square dots reorder in a 2×2 grid via Motion layout animation when active, signaling a card view mode. | `npx shadcn@latest add https://ui.unlumen.com/r/cards-view-icon.json` |
| compact-view-icon | registry:ui | Animated icon where a 3×2 grid of dots reorder themselves via Motion layout animation when active. | `npx shadcn@latest add https://ui.unlumen.com/r/compact-view-icon.json` |
| list-view-icon | registry:ui | Animated icon where three horizontal lines shuffle vertically when active, signaling a list view mode. | `npx shadcn@latest add https://ui.unlumen.com/r/list-view-icon.json` |
| sidebar-toggle-icon | registry:ui | Animated SVG icon that morphs between open and closed sidebar panel states using Motion path interpolation. | `npx shadcn@latest add https://ui.unlumen.com/r/sidebar-toggle-icon.json` |
| aurora-blur | registry:ui | Aurora blur shader layer used by Aurora Card. | `npx shadcn@latest add https://ui.unlumen.com/r/aurora-blur.json` |
| aurora-card | registry:ui | Aurora-blur pricing card with a configurable hero area, layout hooks, and customizable shader controls. | `npx shadcn@latest add https://ui.unlumen.com/r/aurora-card.json` |
| blob-card | registry:ui | Animated card with fluid blob header, animated glow border, and configurable colors. | `npx shadcn@latest add https://ui.unlumen.com/r/blob-card.json` |
| ai-chat | registry:ui | A chat component that allows you to chat with an AI. | `npx shadcn@latest add https://ui.unlumen.com/r/ai-chat.json` |
| animate-count | registry:ui | A number display that animates the transition between values with a blur + slide effect, with a hook to throttle rapid updates. | `npx shadcn@latest add https://ui.unlumen.com/r/animate-count.json` |
| animate-digits | registry:ui | Per-digit blur-slide animation — only the digits that change animate. | `npx shadcn@latest add https://ui.unlumen.com/r/animate-digits.json` |
| animate-text-input-typing | registry:ui | An animated input field with per-character motion effects and a smooth custom cursor overlay — supports multiple animation presets, cursor variants, and input … | `npx shadcn@latest add https://ui.unlumen.com/r/animate-text-input-typing.json` |
| animated-list | registry:ui | A real-time push feed where new items animate in from the top with spring physics — Stripe Radar style. | `npx shadcn@latest add https://ui.unlumen.com/r/animated-list.json` |
| apple-switch | registry:ui | Animated toggle switch with separate track/thumb sizing, spring feedback, optional label text, and tone variants. | `npx shadcn@latest add https://ui.unlumen.com/r/apple-switch.json` |
| aurora-bars | registry:ui | Animated bars with aurora-inspired gradient effects and smooth transitions. | `npx shadcn@latest add https://ui.unlumen.com/r/aurora-bars.json` |
| clipped-circle | registry:ui | A cursor-following spotlight effect that reveals a soft glowing circle wherever the user moves their mouse inside the container. | `npx shadcn@latest add https://ui.unlumen.com/r/clipped-circle.json` |
| command-menu | registry:ui | A composable ⌘K command palette with fuzzy search, custom groups, built-in theme switcher, and animated content reveal. | `npx shadcn@latest add https://ui.unlumen.com/r/command-menu.json` |
| count-up | registry:ui | An animated number counter that springs to its target value when it enters the viewport, with support for decimals, separators, and direction. | `npx shadcn@latest add https://ui.unlumen.com/r/count-up.json` |
| cursor | registry:ui | An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations. | `npx shadcn@latest add https://ui.unlumen.com/r/cursor.json` |
| cursor-image-trail | registry:ui | A trail of images that follows the cursor with spring-physics fade and rotation. | `npx shadcn@latest add https://ui.unlumen.com/r/cursor-image-trail.json` |
| dia-text-reveal | registry:ui | Animated text reveal with a colorful gradient sweep effect, inspired by the Dia app. | `npx shadcn@latest add https://ui.unlumen.com/r/dia-text-reveal.json` |
| dock | registry:ui | Animated dock with Gaussian magnification, spring physics, separators, and tooltip carets. | `npx shadcn@latest add https://ui.unlumen.com/r/dock.json` |
| expand-menu | registry:ui | An animated expanding menu that reveals items from a trigger button, with configurable direction, layout, and alignment. | `npx shadcn@latest add https://ui.unlumen.com/r/expand-menu.json` |
| expandable-navbar | registry:ui | A full-width fixed header with velocity-highlight hover, expanding inline dropdown, scroll hide/show, and a mobile circle-reveal overlay. | `npx shadcn@latest add https://ui.unlumen.com/r/expandable-navbar.json` |
| favicon-search | registry:ui | A search input that fetches and smoothly animates the site favicon into the search bar as you type a URL. | `npx shadcn@latest add https://ui.unlumen.com/r/favicon-search.json` |
| file-tree | registry:component | Animated file-tree component with animated hover highlight, spring folder expand/collapse, and automatic file-type icons. | `npx shadcn@latest add https://ui.unlumen.com/r/file-tree.json` |
| floating-navbar | registry:ui | A sticky floating pill navbar with scroll-velocity spring physics, velocity-highlight hover effect, dropdown menus, mobile overlay, and optional theme toggle. | `npx shadcn@latest add https://ui.unlumen.com/r/floating-navbar.json` |
| floating-tooltip | registry:ui | A floating tooltip component. | `npx shadcn@latest add https://ui.unlumen.com/r/floating-tooltip.json` |
| github-graph | registry:component | A polished, animated GitHub contribution graph for portfolio sites. | `npx shadcn@latest add https://ui.unlumen.com/r/github-graph.json` |
| glowing-badge | registry:ui | Badge with an animated pulsing glow dot. Supports status variants: default, success, warning, error, info. | `npx shadcn@latest add https://ui.unlumen.com/r/glowing-badge.json` |
| gooey-navbar-menu | registry:component | A spring-animated navbar menu with a gooey SVG-filtered background that connects the active trigger and dropdown panel. | `npx shadcn@latest add https://ui.unlumen.com/r/gooey-navbar-menu.json` |
| gooey-svg-filter | registry:ui | An SVG filter that creates a gooey, fluid merging effect on adjacent elements using Gaussian blur and alpha-channel color matrix manipulation. | `npx shadcn@latest add https://ui.unlumen.com/r/gooey-svg-filter.json` |
| highlight | registry:ui | An animated highlight component that tracks elements with smooth spring animations. | `npx shadcn@latest add https://ui.unlumen.com/r/highlight.json` |
| horizontal-depth-fade | registry:ui | Scroll-driven horizontal image strip on a single line with cinematic blur and brightness focus. GSAP ScrollTrigger implementation. | `npx shadcn@latest add https://ui.unlumen.com/r/horizontal-depth-fade.json` |
| hover-expand | registry:ui | A vertical list of rows that expand on hover to reveal a full-width image, animated with Motion springs. | `npx shadcn@latest add https://ui.unlumen.com/r/hover-expand.json` |
| hover-feature-cards | registry:ui | A responsive grid of feature cards where a description panel slides in from below on hover, with spring animation and optional image support. | `npx shadcn@latest add https://ui.unlumen.com/r/hover-feature-cards.json` |
| hover-image-list | registry:ui | A list of large headings that reveal an image on the left and shift right on hover, animated with Motion. | `npx shadcn@latest add https://ui.unlumen.com/r/hover-image-list.json` |
| inline-testimonials | registry:ui | Testimonials rendered as inline flowing text with circular avatars. Hover to blur others and reveal the author's name and role. | `npx shadcn@latest add https://ui.unlumen.com/r/inline-testimonials.json` |
| kbd | registry:ui | Keyboard key and shortcut display component with a soft, minimal key style. | `npx shadcn@latest add https://ui.unlumen.com/r/kbd.json` |
| magnetic-button | registry:ui | A button that magnetically follows cursor proximity with spring physics. Smoothly snaps back when the cursor leaves. | `npx shadcn@latest add https://ui.unlumen.com/r/magnetic-button.json` |
| math-graph | registry:ui | A real-time visual math function builder with animated SVG curves, a pan/zoom canvas, crosshair tooltip, and support for multiple expressions simultaneously. | `npx shadcn@latest add https://ui.unlumen.com/r/math-graph.json` |
| matrix | registry:ui | An LED dot matrix display component with SVG pixels, radial glow, built-in digit/animation presets, and a VU meter mode. | `npx shadcn@latest add https://ui.unlumen.com/r/matrix.json` |
| matrix-image | registry:ui | An animated image component that simulates the iconic Matrix digital rain effect. | `npx shadcn@latest add https://ui.unlumen.com/r/matrix-image.json` |
| motion-faqs-accordion | registry:ui | A clean Motion-powered FAQ accordion with spring-animated content reveal. | `npx shadcn@latest add https://ui.unlumen.com/r/motion-faqs-accordion.json` |
| motion-navigation-menu | registry:component | A spring-animated navigation menu with a single morphing container, layout-animated active pill, and direction-aware content transitions. | `npx shadcn@latest add https://ui.unlumen.com/r/motion-navigation-menu.json` |
| motion-subtitle | registry:component | Animated subtitle text with per-character reveal, blur transition, speed control, and top/bottom direction. | `npx shadcn@latest add https://ui.unlumen.com/r/motion-subtitle.json` |
| motion-tabs-menu | registry:component | A floating bottom tab bar that expands upward with spring animations to reveal tab-specific content, with direction-aware slide transitions. | `npx shadcn@latest add https://ui.unlumen.com/r/motion-tabs-menu.json` |
| nextjs-ship | registry:ui | Animated chip/CPU circuit board visualization with gradient pulse traces traveling along PCB-style paths. | `npx shadcn@latest add https://ui.unlumen.com/r/nextjs-ship.json` |
| orbital-image-wheel | registry:ui | Scroll-driven half-wheel image layout powered by GSAP ScrollTrigger, with cinematic blur/saturation/brightness focus and centered captions. | `npx shadcn@latest add https://ui.unlumen.com/r/orbital-image-wheel.json` |
| orbiting-skills | registry:ui | Animated skill badges that orbit a center element. On desktop the ring follows the cursor on hover; on mobile the ring is always visible. | `npx shadcn@latest add https://ui.unlumen.com/r/orbiting-skills.json` |
| page-transition | registry:ui | GSAP-powered Next.js App Router page transition provider. Wraps your layout to animate between pages with a curtain reveal or slide push — ported from the Codr… | `npx shadcn@latest add https://ui.unlumen.com/r/page-transition.json` |
| perspective-flow | registry:ui | Scroll-driven 3D image grid with perspective rotations, blur, brightness, and inner parallax — supports both GSAP ScrollTrigger and Framer Motion engines. | `npx shadcn@latest add https://ui.unlumen.com/r/perspective-flow.json` |
| pinned-list | registry:ui | A list of items that animate smoothly to a pinned section using Framer Motion layout animations. | `npx shadcn@latest add https://ui.unlumen.com/r/pinned-list.json` |
| pixel-scroll-transition | registry:ui | Canvas-based scroll transition that wipes between two colors with a configurable pixel grid, directional patterns, easing, and accent-color bands. | `npx shadcn@latest add https://ui.unlumen.com/r/pixel-scroll-transition.json` |
| progressive-blur | registry:ui | Top and bottom progressive blur overlays that stack multiple backdrop-filter layers to produce a smooth edge-to-transparent blur effect. | `npx shadcn@latest add https://ui.unlumen.com/r/progressive-blur.json` |
| scramble-text | registry:ui | A text animation component that reveals characters with a scramble/glitch effect, with imperative controls for manual triggering. | `npx shadcn@latest add https://ui.unlumen.com/r/scramble-text.json` |
| scroll-reveal-image | registry:ui | Scroll-driven image reveal with spring-physics width expansion, zoom-out, and border radius animation. | `npx shadcn@latest add https://ui.unlumen.com/r/scroll-reveal-image.json` |
| shimmer-skeleton | registry:ui | Lightweight loading skeleton with a smooth shimmer sweep animation. | `npx shadcn@latest add https://ui.unlumen.com/r/shimmer-skeleton.json` |
| shimmering-text | registry:ui | Animated gradient shimmer text with viewport-triggered and repeating animation support. | `npx shadcn@latest add https://ui.unlumen.com/r/shimmering-text.json` |
| side-by-side-slide | registry:ui | An image comparison slider with a spring-animated divider that follows the cursor on hover, revealing before/after images. | `npx shadcn@latest add https://ui.unlumen.com/r/side-by-side-slide.json` |
| sidebar-001 | registry:ui | Animated vertical sidebar with spring hover highlight, active indicator bar, and per-item dash pattern. | `npx shadcn@latest add https://ui.unlumen.com/r/sidebar-001.json` |
| sidebar-002 | registry:ui | Slide-in overlay sidebar with spring animation, animated dash items, and cursor-following video preview. | `npx shadcn@latest add https://ui.unlumen.com/r/sidebar-002.json` |
| slider | registry:ui | Animated slider with spring-snapped thumb, step dots, range mode, and click-to-edit value display. Built on Radix UI Slider. | `npx shadcn@latest add https://ui.unlumen.com/r/slider.json` |
| smart-animate-text | registry:ui | Per-character blur-slide animation with direct value changes and no animation queue. | `npx shadcn@latest add https://ui.unlumen.com/r/smart-animate-text.json` |
| stacked-feature-cards | registry:ui | A two-column section with a sticky animated hero card on the left and a stack of rotating feature cards on the right. | `npx shadcn@latest add https://ui.unlumen.com/r/stacked-feature-cards.json` |
| switch | registry:ui | Animated toggle switch with a spring-driven thumb, smooth fill transition, and optional label. | `npx shadcn@latest add https://ui.unlumen.com/r/switch.json` |
| tag | registry:component | Rounded outlined tags with six built-in pastel variants and an optional stacked group layout. | `npx shadcn@latest add https://ui.unlumen.com/r/tag.json` |
| team-stack | registry:component | A stacked deck of team member cards that fans out on hover (desktop) or tap (mobile), each with an animated CTA pill and spring physics. | `npx shadcn@latest add https://ui.unlumen.com/r/team-stack.json` |
| text-reveal | registry:ui | Scroll-driven word-by-word or character-by-character text reveal using Motion's useScroll and useTransform. | `npx shadcn@latest add https://ui.unlumen.com/r/text-reveal.json` |
| theme-switch | registry:ui | Animated dark / light mode toggle button with a spring-driven sun ↔ moon icon swap and optional View Transition reveal. | `npx shadcn@latest add https://ui.unlumen.com/r/theme-switch.json` |
| tilt | registry:ui | A spring-animated 3D tilt wrapper that tracks the cursor inside the element. | `npx shadcn@latest add https://ui.unlumen.com/r/tilt.json` |
| tilt-card | registry:ui | A card with 3D spring tilt, optional floating image, badge and radial shine on hover. | `npx shadcn@latest add https://ui.unlumen.com/r/tilt-card.json` |
| tooltip-preview | registry:ui | Link tooltip that reveals a website preview card with title, description, image and favicon. | `npx shadcn@latest add https://ui.unlumen.com/r/tooltip-preview.json` |
| velocity-highlight | registry:ui | A highlight effect with smooth spring physics that tracks the active element across hover or click interactions. | `npx shadcn@latest add https://ui.unlumen.com/r/velocity-highlight.json` |
| vercel-snap-text | registry:ui | A scroll-driven text list that snaps exactly to each item. The active item scales up with an optional prefix, others fade and indent — all animated with Motion… | `npx shadcn@latest add https://ui.unlumen.com/r/vercel-snap-text.json` |
| vertical-marquee | registry:ui | Two columns of tweet cards scrolling vertically in opposite directions with progressive fade at the edges. | `npx shadcn@latest add https://ui.unlumen.com/r/vertical-marquee.json` |
| video-ambient | registry:ui | A video card with ambient blurred reflections and optional overlay styling. | `npx shadcn@latest add https://ui.unlumen.com/r/video-ambient.json` |
| video-slider | registry:ui | A video carousel with animated slide transitions and playback controls. | `npx shadcn@latest add https://ui.unlumen.com/r/video-slider.json` |
| demo-cursor | registry:ui | Demo showing a cursor. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-cursor.json` |
| demo-gravity-stars | registry:ui | Demo showing a gravity stars background. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-gravity-stars.json` |
| demo-pixel | registry:ui | Demo showing a pixel background. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-pixel.json` |
| demo-pixel-grid | registry:ui | Demo showing three pixel backgrounds side by side with different color palettes. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-pixel-grid.json` |
| demo-pixel-liquid-bg | registry:ui | Demo showing the Pixel Liquid Background component. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-pixel-liquid-bg.json` |
| demo-square-pattern | registry:ui | Demo showing the Square Pattern Background component. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-square-pattern.json` |
| demo-wave-background | registry:ui | Demo showcasing scroll-driven and ambient wave dividers — as a page section divider, inside a card, and in both directions. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-wave-background.json` |
| demo-copy | registry:ui | Demo showing a copy button. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-copy.json` |
| demo-glow | registry:example | Three glow buttons with different colour palettes and animation modes. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-glow.json` |
| demo-refresh | registry:example | Refresh Button Demo | `npx shadcn@latest add https://ui.unlumen.com/r/demo-refresh.json` |
| demo-cards-view-icon | registry:example | Four dots reorder themselves in a 2×2 grid via layout animation on toggle to indicate cards view. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-cards-view-icon.json` |
| demo-compact-view-icon | registry:example | Six dots reorder themselves via layout animation on toggle to indicate compact view. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-compact-view-icon.json` |
| demo-list-view-icon | registry:example | Three animated lines shuffle vertically on toggle to indicate list view. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-list-view-icon.json` |
| demo-sidebar-toggle-icon | registry:example | Animated SVG icon that morphs between open and closed sidebar states on click. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-sidebar-toggle-icon.json` |
| demo-aurora-card | registry:example | Pricing card demo matching exactly the pricing page card style. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-aurora-card.json` |
| demo-blob-card | registry:ui | Demo showing the Blob Card component. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-blob-card.json` |
| demo-ai-chat | registry:example | Demo showing an AI chat component. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-ai-chat.json` |
| demo-animate-count | registry:example | Demo showing an animated number counter with blur + slide transitions. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-animate-count.json` |
| demo-animate-digits | registry:example | Timer demo showcasing per-digit blur-slide animation. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-animate-digits.json` |
| demo-animate-text-input-typing | registry:example | Animated text input with per-character motion and custom cursor overlay. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-animate-text-input-typing.json` |
| demo-animated-list | registry:example | Auto-cycling notification feed with spring entry animations. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-animated-list.json` |
| demo-apple-switch | registry:example | A compact settings panel with animated switches, descriptions, sizes, and tone controls. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-apple-switch.json` |
| demo-aurora-bars | registry:example | Demonstration of the Aurora Bars component with animated gradient effects. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-aurora-bars.json` |
| demo-clipped-circle | registry:example | Demo showing a clipped circle spotlight effect on a button, a card, and an image. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-clipped-circle.json` |
| demo-command-menu | registry:example | Demo showing a composable command palette with navigation, component links, and a built-in theme switcher. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-command-menu.json` |
| demo-count-up | registry:example | Demo showing animated number counters with spring physics. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-count-up.json` |
| demo-cursor-image-trail | registry:example | Demo showing a trail of images that follow the cursor with spring physics and fade-out. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-cursor-image-trail.json` |
| demo-dia-text-reveal | registry:example | Demo of the gradient sweep text reveal animation. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-dia-text-reveal.json` |
| demo-dock | registry:example | Vercel-style dock with Lucide icons, separators, and Gaussian magnification. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-dock.json` |
| demo-expand-menu | registry:example | Demo for the Expand Menu component showing Edit, Copy, Share, and Archive actions. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-expand-menu.json` |
| demo-expandable-navbar | registry:example | Full-width fixed header with velocity-highlight hover, expanding inline dropdown, scroll hide/show, and mobile circle-reveal overlay. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-expandable-navbar.json` |
| demo-favicon-search | registry:example | Demo showing the FaviconSearch input — type a website URL and the brand logo animates in. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-favicon-search.json` |
| demo-file-tree | registry:example | Animated file-tree with nested folders, file-type icons, and highlighted files. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-file-tree.json` |
| demo-floating-navbar | registry:example | Floating pill navbar with dropdown menus, mobile overlay, and scroll-velocity spring animation. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-floating-navbar.json` |
| demo-floating-tooltip | registry:example | Floating Tooltip Demo | `npx shadcn@latest add https://ui.unlumen.com/r/demo-floating-tooltip.json` |
| demo-github-graph | registry:example | An animated GitHub contribution graph with an editable account field. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-github-graph.json` |
| demo-glowing-badge | registry:example | Shows all badge variants with animated glow dots. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-glowing-badge.json` |
| demo-gooey-navbar-menu | registry:example | Centered navbar menu with a gooey bridge between the active link and dropdown panel. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-gooey-navbar-menu.json` |
| demo-gooey-svg-filter | registry:example | A gooey radial action menu whose icons spiral out from a central close button before settling into place. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-gooey-svg-filter.json` |
| demo-horizontal-depth-fade | registry:ui | Demo showing the Horizontal Depth Fade component. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-horizontal-depth-fade.json` |
| demo-hover-expand | registry:example | Five travel destinations that expand vertically on hover to reveal a full-width photograph. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-hover-expand.json` |
| demo-hover-feature-cards | registry:example | Two-column feature grid with hover-reveal description panels. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-hover-feature-cards.json` |
| demo-hover-image-list | registry:example | Six large headings with image reveal and slide-right animation on hover. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-hover-image-list.json` |
| demo-inline-testimonials | registry:example | Eight testimonials flowing inline with blur-on-hover and author reveal. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-inline-testimonials.json` |
| demo-kbd | registry:example | Single keyboard keys and common shortcuts using the Kbd and Shortcut components. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-kbd.json` |
| demo-magnetic-button | registry:example | Three magnetic buttons showing different radius and spring configurations. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-magnetic-button.json` |
| demo-math-graph | registry:example | Demo showing an interactive real-time math function visualizer. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-math-graph.json` |
| demo-matrix | registry:example | Interactive demo showcasing real-time clock, animation presets, VU meter, and a pixel draw pad. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-matrix.json` |
| demo-matrix-image | registry:example | Upload an image and render it as a grayscale LED dot matrix with adjustable resolution. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-matrix-image.json` |
| demo-matrix-image-to-frame | registry:example | Upload an image and export it as a binary Frame (0s and 1s) for use with the Matrix component. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-matrix-image-to-frame.json` |
| demo-motion-faqs-accordion | registry:example | 5-item FAQ accordion with spring-animated content reveal. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-motion-faqs-accordion.json` |
| demo-motion-navigation-menu | registry:example | Centered navigation menu with a single morphing container and direction-aware spring transitions. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-motion-navigation-menu.json` |
| demo-motion-tabs-menu | registry:example | Expandable bottom tab bar with spring-animated content panels and direction-aware slide transitions. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-motion-tabs-menu.json` |
| demo-nextjs-ship | registry:example | Animated chip with gradient pulse circuit traces. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-nextjs-ship.json` |
| demo-orbital-image-wheel | registry:ui | Demo showing the Orbital Image Wheel component. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-orbital-image-wheel.json` |
| demo-orbiting-skills | registry:example | Demo showing skill badges orbiting a center avatar, with cursor-following on desktop and always-on mobile mode. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-orbiting-skills.json` |
| demo-page-transition | registry:example | Demo showing four fake pages cycling through curtain, slide, push, and fade transition variants. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-page-transition.json` |
| demo-perspective-flow | registry:ui | Demo showing the Perspective Flow component. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-perspective-flow.json` |
| demo-pinned-list | registry:example | 5-item list with smooth pin/unpin layout animations. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-pinned-list.json` |
| demo-pixel-scroll-transition | registry:example | Scrollable inline demo showing a directional pixel wipe between dark and warm paper sections. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-pixel-scroll-transition.json` |
| demo-progressive-blur | registry:example | Scrollable content with progressive blur overlays at the top and bottom edges. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-progressive-blur.json` |
| demo-scramble-text | registry:example | Interactive demo cycling through phrases with a character-scramble reveal animation. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-scramble-text.json` |
| demo-scroll-reveal-image | registry:example | Demo of the scroll-driven image reveal with spring physics. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-scroll-reveal-image.json` |
| demo-shimmer-skeleton | registry:example | Card-shaped skeleton layout with shimmer animation. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-shimmer-skeleton.json` |
| demo-shimmering-text | registry:example | Cycling shimmer text with AnimatePresence transitions. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-shimmering-text.json` |
| demo-side-by-side-slide | registry:example | Image comparison slider showing before/after with configurable divider and handle. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-side-by-side-slide.json` |
| demo-sidebar-001 | registry:example | Demo showing the Sidebar 001 animated vertical sidebar. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-sidebar-001.json` |
| demo-sidebar-002 | registry:example | Demo showing the Sidebar 002 slide-in overlay sidebar. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-sidebar-002.json` |
| demo-slider | registry:example | Three sliders showing volume, brightness and opacity controls with click-to-edit values. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-slider.json` |
| demo-slider-range | registry:example | Range sliders for price, temperature and year selection with dual spring-snapped thumbs. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-slider-range.json` |
| demo-slider-steps | registry:example | Sliders with visible step dots for rating, quality and zoom level selection. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-slider-steps.json` |
| demo-smart-animate-text | registry:example | Stepped add and subtract demo showcasing direct per-character blur-slide animation. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-smart-animate-text.json` |
| demo-stacked-feature-cards | registry:example | Coffee brand demo with a sticky hero card and five rotating feature cards. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-stacked-feature-cards.json` |
| demo-switch | registry:example | Four labeled toggle switches showing common settings controls. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-switch.json` |
| demo-tag | registry:example | A vertical stack of outlined icon tags using the six built-in color variants. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-tag.json` |
| demo-team-stack | registry:example | A stacked deck of team member cards that fans out on hover, each with a spring-animated CTA pill. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-team-stack.json` |
| demo-text-reveal | registry:example | Word-by-word and character-by-character scroll-driven text reveal. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-text-reveal.json` |
| demo-theme-switch | registry:example | Animated dark/light mode toggle with spring icon transitions. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-theme-switch.json` |
| demo-tilt-card | registry:example | Three tilt cards showcasing badge variants, floating image and custom children. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-tilt-card.json` |
| demo-tooltip-preview | registry:example | Links showing website preview cards on hover. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-tooltip-preview.json` |
| demo-vercel-snap-text | registry:example | Six items cycling with 'We Design' prefix — scroll to snap between them. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-vercel-snap-text.json` |
| demo-vertical-marquee | registry:example | Two-column vertical tweet marquee scrolling in opposite directions with progressive fade edges. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-vertical-marquee.json` |
| demo-video-ambient | registry:example | — | `npx shadcn@latest add https://ui.unlumen.com/r/demo-video-ambient.json` |
| demo-video-slider | registry:example | — | `npx shadcn@latest add https://ui.unlumen.com/r/demo-video-slider.json` |
| demo-highlight | registry:example | Interactive highlight effect with smooth spring animations. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-highlight.json` |
| demo-velocity-highlight | registry:example | Interactive highlight with velocity-based scaling effects. | `npx shadcn@latest add https://ui.unlumen.com/r/demo-velocity-highlight.json` |
| hooks-use-auto-height | registry:hook | A hook that allows you to automatically adjust the height of an element based on its content. | `npx shadcn@latest add https://ui.unlumen.com/r/hooks-use-auto-height.json` |
| hooks-use-controlled-state | registry:hook | React hook for controlled and uncontrolled component state. | `npx shadcn@latest add https://ui.unlumen.com/r/hooks-use-controlled-state.json` |
| hooks-use-data-state | registry:hook | A hook that allows you to get the data-state of an element. | `npx shadcn@latest add https://ui.unlumen.com/r/hooks-use-data-state.json` |
| hooks-use-is-in-view | registry:hook | A hook that allows you to check if an element is in view. | `npx shadcn@latest add https://ui.unlumen.com/r/hooks-use-is-in-view.json` |
| hooks-use-motion-value-state | registry:hook | A hook that allows you to use a motion value state. | `npx shadcn@latest add https://ui.unlumen.com/r/hooks-use-motion-value-state.json` |
| lib-get-strict-context | registry:lib | React context helper that throws when used outside its provider. | `npx shadcn@latest add https://ui.unlumen.com/r/lib-get-strict-context.json` |
| pixel-patterns | registry:lib | Deterministic threshold, accent, and easing helpers for pixel-grid transition components. | `npx shadcn@latest add https://ui.unlumen.com/r/pixel-patterns.json` |
| primitives-animate-avatar-group | registry:ui | An animated avatar group that displays overlapping user images and smoothly shifts each avatar forward on hover to highlight it. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-animate-avatar-group.json` |
| primitives-animate-code-block | registry:ui | A code block component that animates the code as it is written. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-animate-code-block.json` |
| primitives-animate-cursor | registry:ui | An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-animate-cursor.json` |
| primitives-animate-files | registry:ui | Animated file-tree primitives with motion hover highlight, spring folder expand/collapse, and animated folder icon swap. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-animate-files.json` |
| primitives-animate-github-stars | registry:ui | A component that animates a number of stars, smoothly animating number transitions using the SlidingNumber component. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-animate-github-stars.json` |
| primitives-animate-motion-grid | registry:ui | A grid that displays animations in a grid. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-animate-motion-grid.json` |
| primitives-animate-pinned-list | registry:ui | A pin list component that allows you to pin items to the top of the list. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-animate-pinned-list.json` |
| primitives-animate-scroll-progress | registry:ui | A scroll progress component that allows you to track the progress of a scrollable element. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-animate-scroll-progress.json` |
| primitives-animate-slot | registry:ui | A slot component that allows you to use motion components with any element. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-animate-slot.json` |
| primitives-animate-spring | registry:ui | A flexible, animated spring component that attaches a draggable element to its origin with a spring line. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-animate-spring.json` |
| primitives-animate-tabs | registry:ui | A set of layered sections of content—known as tab panels—that are displayed one at a time. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-animate-tabs.json` |
| primitives-animate-tooltip | registry:ui | An animated tooltip that shows contextual info on hover or focus and smoothly glides to the next element without disappearing between transitions. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-animate-tooltip.json` |
| button | registry:ui | A simple button that animates on hover and tap. | `npx shadcn@latest add https://ui.unlumen.com/r/button.json` |
| primitives-buttons-button | registry:ui | A simple button that animates on hover and tap. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-buttons-button.json` |
| primitives-buttons-flip | registry:ui | A button that flips between two states on hover. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-buttons-flip.json` |
| primitives-buttons-liquid | registry:ui | A button that fills on hover. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-buttons-liquid.json` |
| primitives-buttons-ripple | registry:ui | A button that animates on tap with a ripple effect. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-buttons-ripple.json` |
| cursor-primitive | registry:ui | An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations. | `npx shadcn@latest add https://ui.unlumen.com/r/cursor-primitive.json` |
| primitives-effects-auto-height | registry:ui | An effect that automatically adjusts the height of an element based on its content. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-auto-height.json` |
| primitives-effects-blur | registry:ui | An effect that allows you to animate elements with a blur effect on first view or load. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-blur.json` |
| primitives-effects-click | registry:ui | An effect that creates animated effects at the click position, adding interactive feedback to user actions. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-click.json` |
| primitives-effects-effect | registry:ui | An effect that allows you to animate elements on first view or load. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-effect.json` |
| primitives-effects-fade | registry:ui | An effect that allows you to animate elements with a fade effect on first view or load. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-fade.json` |
| primitives-effects-highlight-nav-menu | registry:ui | A Radix UI NavigationMenu with animated highlight hover effects built in. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-highlight-nav-menu.json` |
| primitives-effects-image-zoom | registry:ui | An effect that allows you to zoom in on an image on hover. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-image-zoom.json` |
| primitives-effects-magnetic | registry:ui | A magnetic effect that clings to the cursor, creating a magnetic attraction effect. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-magnetic.json` |
| primitives-effects-particles | registry:ui | A particles effect that creates a particle system. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-particles.json` |
| primitives-effects-shine | registry:ui | An animated light sweep effect with configurable timing, colors, and triggers (hover, tap, or continuous). | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-shine.json` |
| primitives-effects-slide | registry:ui | An effect that allows you to animate elements with a slide effect on first view or load. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-slide.json` |
| primitives-effects-theme-toggler | registry:ui | An effect that allows you to toggle the theme gradually. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-theme-toggler.json` |
| primitives-effects-tilt | registry:ui | An effect that allows you to animate elements with a tilt effect on mouse hover. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-tilt.json` |
| primitives-effects-velocity-highlight | registry:ui | A highlight effect with smooth spring physics that tracks the active element across hover or click interactions. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-velocity-highlight.json` |
| primitives-effects-zoom | registry:ui | An effect that allows you to animate elements with a zoom effect on first view or load. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-effects-zoom.json` |
| slot | registry:ui | A slot component that allows you to use motion components with any element. | `npx shadcn@latest add https://ui.unlumen.com/r/slot.json` |
| tabs | registry:ui | A set of layered sections of content—known as tab panels—that are displayed one at a time. | `npx shadcn@latest add https://ui.unlumen.com/r/tabs.json` |
| primitives-texts-counting-number | registry:ui | A counting number animation. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-texts-counting-number.json` |
| primitives-texts-gradient | registry:ui | A gradient text animation. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-texts-gradient.json` |
| primitives-texts-highlight | registry:ui | A highlight text animation. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-texts-highlight.json` |
| primitives-texts-morphing | registry:ui | A text component that smoothly morphs characters to transition between strings. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-texts-morphing.json` |
| primitives-texts-rolling | registry:ui | A rolling text animation. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-texts-rolling.json` |
| primitives-texts-rotating | registry:ui | A rotating text animation. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-texts-rotating.json` |
| primitives-texts-scrolling-number | registry:ui | A scrolling number animation. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-texts-scrolling-number.json` |
| primitives-texts-shimmering | registry:ui | A shimmering text animation. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-texts-shimmering.json` |
| primitives-texts-sliding-number | registry:ui | A sliding number animation. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-texts-sliding-number.json` |
| primitives-texts-splitting | registry:ui | A splitting text animation. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-texts-splitting.json` |
| primitives-texts-typing | registry:ui | A typing text animation. | `npx shadcn@latest add https://ui.unlumen.com/r/primitives-texts-typing.json` |

## For AI agents

```text
You are adding components from @unlumen-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/unlumen-ui.md) for the component list.
2. Fetch the machine-readable index: https://ui.unlumen.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: unlumen-ui).
```