registry.json

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "uniqueui",
  "homepage": "https://uniqueui-platform.vercel.app",
  "items": [
    {
      "name": "moving-border",
      "type": "registry:ui",
      "title": "Moving Border",
      "description": "SVG-path-tracing animated border that orbits a button or card.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/moving-border.tsx",
          "type": "registry:component",
          "target": "components/ui/moving-border.tsx"
        }
      ],
      "tailwind": {
        "config": {
          "theme": {
            "extend": {
              "animation": {
                "border-spin": "border-spin 3s linear infinite"
              },
              "keyframes": {
                "border-spin": {
                  "100%": {
                    "transform": "rotate(-360deg)"
                  }
                }
              }
            }
          }
        }
      }
    },
    {
      "name": "typewriter-text",
      "type": "registry:ui",
      "title": "Typewriter Text",
      "description": "Character-by-character typing with blinking cursor, configurable speed, and delete-retype loop.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/typewriter-text.tsx",
          "type": "registry:component",
          "target": "components/ui/typewriter-text.tsx"
        }
      ]
    },
    {
      "name": "3d-tilt-card",
      "type": "registry:ui",
      "title": "3D Tilt Card",
      "description": "Perspective-shifting card that tilts toward the cursor with parallax layers and glare overlay.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/3d-tilt-card.tsx",
          "type": "registry:component",
          "target": "components/ui/3d-tilt-card.tsx"
        }
      ]
    },
    {
      "name": "spotlight-card",
      "type": "registry:ui",
      "title": "Spotlight Card",
      "description": "Card with a radial spotlight that follows the mouse cursor across its surface.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/spotlight-card.tsx",
          "type": "registry:component",
          "target": "components/ui/spotlight-card.tsx"
        }
      ]
    },
    {
      "name": "aurora-background",
      "type": "registry:ui",
      "title": "Aurora Background",
      "description": "A fully customizable, smooth aurora light background mimicking the northern lights. Configurable via exact hex props alongside automatic integration with the current light or dark mode theme. Accessibility: Respects prefers-reduced-motion (drifting pauses smoothly).",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/aurora-background.tsx",
          "type": "registry:component",
          "target": "components/ui/aurora-background.tsx"
        }
      ]
    },
    {
      "name": "animated-tabs",
      "type": "registry:ui",
      "title": "Animated Tabs",
      "description": "Tab bar with a sliding pill that morphs between active tabs using layout animation.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/animated-tabs.tsx",
          "type": "registry:component",
          "target": "components/ui/animated-tabs.tsx"
        }
      ]
    },
    {
      "name": "magnetic-button",
      "type": "registry:ui",
      "title": "Magnetic Button",
      "description": "Button that stretches toward the cursor when nearby and snaps back with spring physics.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/magnetic-button.tsx",
          "type": "registry:component",
          "target": "components/ui/magnetic-button.tsx"
        }
      ]
    },
    {
      "name": "infinite-marquee",
      "type": "registry:ui",
      "title": "Infinite Marquee",
      "description": "Seamless infinite-scrolling ticker with pause-on-hover and variable speed.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/infinite-marquee.tsx",
          "type": "registry:component",
          "target": "components/ui/infinite-marquee.tsx"
        }
      ]
    },
    {
      "name": "scroll-reveal",
      "type": "registry:ui",
      "title": "Scroll Reveal",
      "description": "Elements animate into view when they enter the viewport, with 6 animation presets.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/scroll-reveal.tsx",
          "type": "registry:component",
          "target": "components/ui/scroll-reveal.tsx"
        }
      ]
    },
    {
      "name": "skeleton-shimmer",
      "type": "registry:ui",
      "title": "Skeleton Shimmer",
      "description": "Skeleton loading placeholders with animated shimmer gradient sweep and pulse fade.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/skeleton-shimmer.tsx",
          "type": "registry:component",
          "target": "components/ui/skeleton-shimmer.tsx"
        }
      ]
    },
    {
      "name": "morphing-modal",
      "type": "registry:ui",
      "title": "Morphing Modal",
      "description": "Modal that expands from the trigger element with spring physics and backdrop blur.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/morphing-modal.tsx",
          "type": "registry:component",
          "target": "components/ui/morphing-modal.tsx"
        }
      ]
    },
    {
      "name": "animated-glowing-text-outline",
      "type": "registry:ui",
      "title": "Animated Glowing Text",
      "description": "Animated SVG drawing trace outline over shimmering text characters.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/animated-glowing-text-outline.tsx",
          "type": "registry:component",
          "target": "components/ui/animated-glowing-text-outline.tsx"
        }
      ]
    },
    {
      "name": "gradient-text-reveal",
      "type": "registry:ui",
      "title": "Gradient Text Reveal",
      "description": "Word-by-word text reveal with gradient coloring and blur-to-clear spring animation.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/gradient-text-reveal.tsx",
          "type": "registry:component",
          "target": "components/ui/gradient-text-reveal.tsx"
        }
      ]
    },
    {
      "name": "scramble-text",
      "type": "registry:ui",
      "title": "Scramble Text",
      "description": "Matrix-style text scramble effect that resolves characters left-to-right.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/scramble-text.tsx",
          "type": "registry:component",
          "target": "components/ui/scramble-text.tsx"
        }
      ]
    },
    {
      "name": "meteors-card",
      "type": "registry:ui",
      "title": "Meteors Card",
      "description": "Card with animated meteor/shooting star particles falling through the background.",
      "dependencies": [
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/meteors-card.tsx",
          "type": "registry:component",
          "target": "components/ui/meteors-card.tsx"
        }
      ],
      "tailwind": {
        "config": {
          "theme": {
            "extend": {
              "animation": {
                "meteor": "meteor 5s linear infinite"
              },
              "keyframes": {
                "meteor": {
                  "0%": {
                    "transform": "rotate(215deg) translateX(0)",
                    "opacity": "1"
                  },
                  "70%": {
                    "opacity": "1"
                  },
                  "100%": {
                    "transform": "rotate(215deg) translateX(-500px)",
                    "opacity": "0"
                  }
                }
              }
            }
          }
        }
      }
    },
    {
      "name": "mini-mac-keyboard",
      "type": "registry:ui",
      "title": "Mini Mac Keyboard",
      "description": "Pure CSS decorative compact Mac-style keyboard with subtle spring entrance from motion.dev — ideal for hero device mockups.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/mini-mac-keyboard.tsx",
          "type": "registry:component",
          "target": "components/ui/mini-mac-keyboard.tsx"
        }
      ]
    },
    {
      "name": "flip-card",
      "type": "registry:ui",
      "title": "Flip Card",
      "description": "3D card flip with spring physics, supporting hover or click triggers.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/flip-card.tsx",
          "type": "registry:component",
          "target": "components/ui/flip-card.tsx"
        }
      ]
    },
    {
      "name": "dot-grid-background",
      "type": "registry:ui",
      "title": "Dot Grid Background",
      "description": "Interactive dot-grid pattern with a glowing cursor-following effect.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/dot-grid-background.tsx",
          "type": "registry:component",
          "target": "components/ui/dot-grid-background.tsx"
        }
      ]
    },
    {
      "name": "floating-dock",
      "type": "registry:ui",
      "title": "Floating Dock",
      "description": "macOS-style dock with magnetic scaling, spring physics, and tooltips.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/floating-dock.tsx",
          "type": "registry:component",
          "target": "components/ui/floating-dock.tsx"
        }
      ]
    },
    {
      "name": "confetti-burst",
      "type": "registry:ui",
      "title": "Confetti Burst",
      "description": "Click-triggered confetti particle explosion with customizable colors and physics.",
      "dependencies": [
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/confetti-burst.tsx",
          "type": "registry:component",
          "target": "components/ui/confetti-burst.tsx"
        }
      ]
    },
    {
      "name": "drawer-slide",
      "type": "registry:ui",
      "title": "Drawer Slide",
      "description": "Slide-out drawer panel with drag-to-dismiss, spring physics, and backdrop blur. Portals above page chrome by default.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/drawer-slide.tsx",
          "type": "registry:component",
          "target": "components/ui/drawer-slide.tsx"
        }
      ]
    },
    {
      "name": "notification-stack",
      "type": "registry:ui",
      "title": "Notification Stack",
      "description": "Stacked toast notifications with auto-dismiss progress, sliding animations, and multiple types. Renders through a portal above page chrome by default.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/notification-stack.tsx",
          "type": "registry:component",
          "target": "components/ui/notification-stack.tsx"
        }
      ]
    },
    {
      "name": "animated-timeline",
      "type": "registry:ui",
      "title": "Animated Timeline",
      "description": "Scroll-triggered timeline with 4 distinct Motion.dev animation variants: vertical spring, horizontal growing line, alternating cards, and numbered steps.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/animated-timeline.tsx",
          "type": "registry:component",
          "target": "components/ui/animated-timeline.tsx"
        }
      ]
    },
    {
      "name": "nested-comments",
      "type": "registry:ui",
      "title": "Nested Comments",
      "description": "Threaded comment section with infinite nesting, animated expand/collapse, inline reply composer, and spring-physics like button.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/nested-comments.tsx",
          "type": "registry:component",
          "target": "components/ui/nested-comments.tsx"
        }
      ]
    },
    {
      "name": "hover-reveal-card",
      "type": "registry:ui",
      "title": "Hover Reveal Card",
      "description": "Card that displays an image with teaser content, then slides up a full details panel on hover with staggered Motion.dev animations.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/hover-reveal-card.tsx",
          "type": "registry:component",
          "target": "components/ui/hover-reveal-card.tsx"
        }
      ]
    },
    {
      "name": "bento-grid",
      "type": "registry:ui",
      "title": "Bento Grid",
      "description": "Responsive masonry-style grid with staggered scroll-reveal, pointer-follow spotlight, hover lift and shadows, optional spin borders, and spring micro-interactions per cell.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/bento-grid.tsx",
          "type": "registry:component",
          "target": "components/ui/bento-grid.tsx"
        }
      ]
    },
    {
      "name": "horizontal-scroll-gallery",
      "type": "registry:ui",
      "title": "Horizontal Scroll Gallery",
      "description": "Converts vertical scroll into horizontal movement with momentum physics for immersive galleries.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/horizontal-scroll-gallery.tsx",
          "type": "registry:component",
          "target": "components/ui/horizontal-scroll-gallery.tsx"
        }
      ]
    },
    {
      "name": "particle-field",
      "type": "registry:ui",
      "title": "Particle Field",
      "description": "Canvas-based floating particles with mouse-repulsion physics and responsive connecting lines.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/particle-field.tsx",
          "type": "registry:component",
          "target": "components/ui/particle-field.tsx"
        }
      ]
    },
    {
      "name": "interactive-cursor",
      "type": "registry:ui",
      "title": "Interactive Cursor",
      "description": "Spring-smoothed cursor overlay with magnetic hover states, click ripples, optional particles, and support for full-page or container-scoped interactions.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/interactive-cursor.tsx",
          "type": "registry:component",
          "target": "components/ui/interactive-cursor.tsx"
        }
      ]
    },
    {
      "name": "radial-menu",
      "type": "registry:ui",
      "title": "Radial Menu",
      "description": "Circular flyout menu that bursts items outward from a center trigger with staggered spring animation.",
      "dependencies": [
        "motion",
        "lucide-react",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/radial-menu.tsx",
          "type": "registry:component",
          "target": "components/ui/radial-menu.tsx"
        }
      ]
    },
    {
      "name": "cursor-trail",
      "type": "registry:ui",
      "title": "Cursor Trail",
      "description": "Glowing trail that follows the cursor with decay physics, like a sparkler or comet tail.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/cursor-trail.tsx",
          "type": "registry:component",
          "target": "components/ui/cursor-trail.tsx"
        }
      ]
    },
    {
      "name": "pen-cursor",
      "type": "registry:ui",
      "title": "Pen Cursor",
      "description": "Physics-driven ribbon trail rendered on canvas — a chain of linked points follows the mouse with spring-damping inertia, width scales with speed, and colors interpolate head-to-tail. Inspired by obsidianassembly.com.",
      "dependencies": [
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/pen-cursor.tsx",
          "type": "registry:component",
          "target": "components/ui/pen-cursor.tsx"
        }
      ]
    },
    {
      "name": "glow-hero-section",
      "type": "registry:ui",
      "title": "Glow Hero Section",
      "description": "Physics-driven hero section with an interactive aqueous mesh canvas, spring-based motion text entrance, and fully configurable badge, heading, description, colors, and dimensions.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/glow-hero-section.tsx",
          "type": "registry:component",
          "target": "components/ui/glow-hero-section.tsx"
        }
      ]
    },
    {
      "name": "morphing-card-stack",
      "type": "registry:ui",
      "title": "Morphing Card Stack",
      "description": "An interactive collection of cards that smoothly layout-morphs between Stack, Grid, and List configurations using Framer Motion springs.",
      "dependencies": [
        "motion",
        "lucide-react",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/morphing-card-stack.tsx",
          "type": "registry:component",
          "target": "components/ui/morphing-card-stack.tsx"
        }
      ]
    },
    {
      "name": "limelight-nav",
      "type": "registry:ui",
      "title": "Limelight Nav",
      "description": "Adaptive fluid navigation bar with a limelight spotlight and spring-animated tabs.",
      "dependencies": [
        "motion",
        "lucide-react",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/limelight-nav.tsx",
          "type": "registry:component",
          "target": "components/ui/limelight-nav.tsx"
        }
      ]
    },
    {
      "name": "data-table",
      "type": "registry:ui",
      "title": "Data Table",
      "description": "Typed, zero-dependency data grid that auto-switches between a hand-rolled virtualized engine (10 to 100,000 rows) and a standard engine with row grouping and rowspan. Search, single and multi sort, multi-select, row expansion, frozen columns, column groups, pinned rows, and feature presets.",
      "dependencies": [
        "lucide-react",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/data-table.tsx",
          "type": "registry:component",
          "target": "components/ui/data-table.tsx"
        }
      ]
    },
    {
      "name": "multi-step-auth-card",
      "type": "registry:ui",
      "title": "Multi-Step Auth Card",
      "description": "Animation-first enterprise auth flow: email discovery, first-time and returning user paths, password create/login, and OTP verification with spring transitions between steps.",
      "dependencies": [
        "motion",
        "lucide-react",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/multi-step-auth-card.tsx",
          "type": "registry:component",
          "target": "components/ui/multi-step-auth-card.tsx"
        }
      ]
    },
    {
      "name": "shiny-text",
      "type": "registry:ui",
      "title": "Shiny Text",
      "description": "A shimmering highlight that continuously sweeps across text — perfect for hero taglines and call-to-action copy.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/shiny-text.tsx",
          "type": "registry:component",
          "target": "components/ui/shiny-text.tsx"
        }
      ]
    },
    {
      "name": "outlined-mega-mark",
      "type": "registry:ui",
      "title": "Outlined Mega Mark",
      "description": "Full-width mega outlined headline with theme-aware stroke colours; optional hover swaps the outline for an SVG gradient stroke (hollow fill).",
      "dependencies": [
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/outlined-mega-mark.tsx",
          "type": "registry:component",
          "target": "components/ui/outlined-mega-mark.tsx"
        }
      ]
    },
    {
      "name": "blur-reveal",
      "type": "registry:ui",
      "title": "Blur Reveal",
      "description": "Characters or words materialise from a soft blur — the cinematic text entrance used in top SaaS hero sections.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/blur-reveal.tsx",
          "type": "registry:component",
          "target": "components/ui/blur-reveal.tsx"
        }
      ]
    },
    {
      "name": "count-up",
      "type": "registry:ui",
      "title": "Count Up",
      "description": "An animated number that counts from a starting value to a target when scrolled into view — essential for metrics and stats sections.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/count-up.tsx",
          "type": "registry:component",
          "target": "components/ui/count-up.tsx"
        }
      ]
    },
    {
      "name": "border-beam",
      "type": "registry:ui",
      "title": "Border Beam",
      "description": "A glowing comet that continuously orbits the border of a container — instantly upgrades cards, code blocks, and feature sections.",
      "dependencies": [
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/border-beam.tsx",
          "type": "registry:component",
          "target": "components/ui/border-beam.tsx"
        }
      ]
    },
    {
      "name": "ripple",
      "type": "registry:ui",
      "title": "Ripple",
      "description": "Luminous orbs that drift slowly across the viewport — a liquid nebula hero background with warm, organic colour blooms.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/ripple.tsx",
          "type": "registry:component",
          "target": "components/ui/ripple.tsx"
        }
      ]
    },
    {
      "name": "word-rotate",
      "type": "registry:ui",
      "title": "Word Rotate",
      "description": "A list of words that cycle with slide, flip, or fade transitions — the signature hero-headline effect used across modern SaaS sites.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/word-rotate.tsx",
          "type": "registry:component",
          "target": "components/ui/word-rotate.tsx"
        }
      ]
    },
    {
      "name": "shooting-stars-grid",
      "type": "registry:ui",
      "title": "ShootingStarsGrid",
      "description": "A cinematic hero-section background: a faint grid bathed in dark-emerald glow, with thin white streaks that race along grid lanes like falling stars. Built on Motion.dev with compositor-only transforms for smooth 60fps.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/shooting-stars-grid.tsx",
          "type": "registry:component",
          "target": "components/ui/shooting-stars-grid.tsx"
        }
      ]
    },
    {
      "name": "dynamic-info",
      "type": "registry:ui",
      "title": "DynamicInfo",
      "description": "An interactive profile pill that shows avatar, name, role, and a live ticking clock. Click to reveal social links and a status indicator. Drop-in floatable via the position prop.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/dynamic-info.tsx",
          "type": "registry:component",
          "target": "components/ui/dynamic-info.tsx"
        }
      ]
    },
    {
      "name": "macbook-mock",
      "type": "registry:ui",
      "title": "Macbook Mock",
      "description": "Faux MacBook frame with a hover-driven lid open and a fade-or-flap screen reveal. Hover to lift the lid; the idle screen crossfades or folds back to expose your image or React node.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/macbook-mock.tsx",
          "type": "registry:component",
          "target": "components/ui/macbook-mock.tsx"
        }
      ]
    },
    {
      "name": "liquid-glass-panel",
      "type": "registry:ui",
      "title": "Liquid Glass Panel",
      "description": "A frosted container that physically refracts the content behind it via SVG turbulence + displacement — not a simple backdrop blur. Sub-pixel-crisp text on top, slow specular sheen, Fresnel-like edge highlight, and a hover boost on the displacement strength. Honors prefers-reduced-motion.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/liquid-glass-panel.tsx",
          "type": "registry:component",
          "target": "components/ui/liquid-glass-panel.tsx"
        }
      ]
    },
    {
      "name": "shader-mesh-gradient",
      "type": "registry:ui",
      "title": "Shader Mesh Gradient",
      "description": "GPU-rendered mesh gradient: a fragment shader warps multiple OKLCH color blobs through 3-octave simplex noise so they flow continuously instead of locking into a static pattern. Pointer position subtly attracts the nearest blob; reduced-motion freezes a single curated frame; falls back to a static CSS radial gradient on devices without WebGL2.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/shader-mesh-gradient.tsx",
          "type": "registry:component",
          "target": "components/ui/shader-mesh-gradient.tsx"
        }
      ]
    },
    {
      "name": "caustic-light-card",
      "type": "registry:ui",
      "title": "Caustic Light Card",
      "description": "A premium card surface with animated pool-like caustic highlights rendered by a lightweight WebGL2 fragment shader. Caustics are masked to the lower region, brightest near the bottom, with hover-driven boosts to intensity and speed. Off-screen cards pause automatically and only four visible cards animate at once.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/caustic-light-card.tsx",
          "type": "registry:component",
          "target": "components/ui/caustic-light-card.tsx"
        }
      ]
    },
    {
      "name": "chromatic-aberration-reveal",
      "type": "registry:ui",
      "title": "Chromatic Aberration Reveal",
      "description": "Reveal an image with an RGB split that converges into a clean final frame. Three channel-shifted layers spring to alignment with subtle staggering, plus a one-pass wave sweep during convergence. Supports in-view once, mount-triggered, and manual visibility control.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/chromatic-aberration-reveal.tsx",
          "type": "registry:component",
          "target": "components/ui/chromatic-aberration-reveal.tsx"
        }
      ]
    },
    {
      "name": "iridescent-foil-button",
      "type": "registry:ui",
      "title": "Iridescent Foil Button",
      "description": "A holographic foil CTA button with pointer-reactive hue/angle shifts, soft specular sheen, and fine grain texture. Built as a drop-in button with proper focus states, disabled support, and reduced-motion-safe scale behavior.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/iridescent-foil-button.tsx",
          "type": "registry:component",
          "target": "components/ui/iridescent-foil-button.tsx"
        }
      ]
    },
    {
      "name": "kinetic-variable-headline",
      "type": "registry:ui",
      "title": "Kinetic Variable Headline",
      "description": "A large display headline that animates variable font weight per glyph on entrance and pointer proximity. Letters inflate like a magnetic field while preserving readable text semantics.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/kinetic-variable-headline.tsx",
          "type": "registry:component",
          "target": "components/ui/kinetic-variable-headline.tsx"
        }
      ]
    },
    {
      "name": "refractive-cursor-lens",
      "type": "registry:ui",
      "title": "Refractive Cursor Lens",
      "description": "A circular liquid-glass lens that follows the cursor with spring lag and refracts the content underneath via SVG turbulence + displacement. A radial-falloff mask attenuates distortion toward the center, so the rim ripples while the middle stays calm — opposite of a fisheye. Pass-through clicks, screen-reader hidden, disabled on touch and reduced-motion.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/refractive-cursor-lens.tsx",
          "type": "registry:component",
          "target": "components/ui/refractive-cursor-lens.tsx"
        }
      ]
    },
    {
      "name": "ambient-glow-card",
      "type": "registry:ui",
      "title": "Ambient Glow Card",
      "description": "A single responsive card whose copy you write as normal JSX children. A soft radial-gradient blob slowly drifts between the four corners — colour and speed are props. Headings inherit the page font; paragraphs get muted body styling. Fills any parent column via w-full h-full.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/ambient-glow-card.tsx",
          "type": "registry:component",
          "target": "components/ui/ambient-glow-card.tsx"
        }
      ]
    },
    {
      "name": "hero-reference-pulse",
      "type": "registry:ui",
      "title": "Reference Pulse Hero",
      "description": "A reference hero block. Conic-gradient halo rotating behind a radial pulse, with motion-driven entry on the headline. Drop your own children in to replace the default composition; the background also ships as a standalone export.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/hero-reference-pulse.tsx",
          "type": "registry:component",
          "target": "components/ui/hero-reference-pulse.tsx"
        }
      ]
    },
    {
      "name": "hero-iridescent-sweep",
      "type": "registry:ui",
      "title": "Iridescent Sweep Hero",
      "description": "An editorial, holographic-foil hero. Conic-gradient foil drifts under a turbulence grain; a soft sheen ribbon sweeps across on a slow cadence; the headline ships with a one-shot foil sheen on mount. CSS + SVG + motion only — no WebGL.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/hero-iridescent-sweep.tsx",
          "type": "registry:component",
          "target": "components/ui/hero-iridescent-sweep.tsx"
        }
      ]
    },
    {
      "name": "hero-liquid-aurora-mesh",
      "type": "registry:ui",
      "title": "Liquid Aurora Mesh Hero",
      "description": "An aurora-mesh hero whose colour ribbons drift through an SVG turbulence-displacement filter for an organic, fluid look. Mouse-reactive light pool follows the cursor with a spring; headline words rise on mount via per-word reveal. Pure CSS + SVG + motion — no WebGL deps.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/hero-liquid-aurora-mesh.tsx",
          "type": "registry:component",
          "target": "components/ui/hero-liquid-aurora-mesh.tsx"
        }
      ]
    },
    {
      "name": "hero-noise-dot-field",
      "type": "registry:ui",
      "title": "Noise Dot Field Hero",
      "description": "A canvas-rendered hero block. A dense dot grid is displaced by a sine-wave noise field and parts smoothly around the cursor with a falloff pocket. Honors `prefers-reduced-motion`, devicePixelRatio-aware, and ships with zero external animation deps beyond `motion`.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/hero-noise-dot-field.tsx",
          "type": "registry:component",
          "target": "components/ui/hero-noise-dot-field.tsx"
        }
      ]
    },
    {
      "name": "hero-logo-marquee",
      "type": "registry:ui",
      "title": "Logo Marquee Hero",
      "description": "A classic SaaS hero: bold headline above two ticker rows of partner / customer logos scrolling in opposite directions. CSS mask softens the edges, reduced-motion freezes the rows, and the brand list is fully customizable.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/hero-logo-marquee.tsx",
          "type": "registry:component",
          "target": "components/ui/hero-logo-marquee.tsx"
        }
      ]
    },
    {
      "name": "hero-magnetic-letters",
      "type": "registry:ui",
      "title": "Magnetic Letters Hero",
      "description": "Dark editorial hero where every letter of the headline tracks the cursor under its own spring physics. Configurable pull radius and strength. The backdrop is three large blurred gradient orbs (teal, magenta, amber) drifting diagonally on independent slow loops with `mix-blend: screen`, layered with a static SVG-turbulence film grain. A soft white glow fades in around letters as the pointer approaches.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/hero-magnetic-letters.tsx",
          "type": "registry:component",
          "target": "components/ui/hero-magnetic-letters.tsx"
        }
      ]
    },
    {
      "name": "hero-terminal",
      "type": "registry:ui",
      "title": "Terminal Hero",
      "description": "A 'code-builds-the-page' hero: a headline above a macOS-style terminal that types your install commands and prints their output. Ships the reusable Terminal window too, with reduced-motion, in-view triggering, replay, copy, and keystroke sound.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/hero-terminal.tsx",
          "type": "registry:component",
          "target": "components/ui/hero-terminal.tsx"
        }
      ]
    },
    {
      "name": "hero-flow-field",
      "type": "registry:ui",
      "title": "Flow Field Hero",
      "description": "A canvas-rendered hero block. Particles advect along a summed-sine flow field, leaving comet trails that bend and wave as you scroll — the field's phase is driven by `window.scrollY`. Scroll-driven (not cursor-driven), with light/dark `theme` support, a centered scrim that keeps headline text legible over the field, devicePixelRatio-aware rendering, a static `prefers-reduced-motion` fallback, and zero external animation deps beyond `motion`.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/hero-flow-field.tsx",
          "type": "registry:component",
          "target": "components/ui/hero-flow-field.tsx"
        }
      ]
    },
    {
      "name": "magnetic-text",
      "type": "registry:ui",
      "title": "Magnetic Text",
      "description": "Per-letter cursor-tracking text effect. Every glyph leans toward the pointer under its own spring; linear falloff inside the configured radius, capped at the configured strength. Soft white glow fades in near the cursor. Wrapper carries an aria-label; per-glyph spans are aria-hidden so screen readers never spell the word out.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/magnetic-text.tsx",
          "type": "registry:component",
          "target": "components/ui/magnetic-text.tsx"
        }
      ]
    },
    {
      "name": "hero-radial-burst",
      "type": "registry:ui",
      "title": "Radial Burst Hero",
      "description": "A Stripe-style hero block: an interactive fiber-optic radial burst on canvas. Fine glowing rays stream out of a bottom-center origin in a wide fan, each one continuously growing, over-extending, fading, and regenerating with fresh angle/length/speed/opacity, with a single glowing dot riding each fiber's tip. Hovering the middle or tip of a fiber makes it (and its neighbours) brighten, stretch, and bend toward the cursor, then ease back to their drift; the dense zone near the origin stays calm. The burst sits in a short lower band, masked so it fades out below the headline. Ships with six time-of-day themes (Pre-dawn, Sunrise, Daytime, Dusk, Sunset, Night) and an in-block switcher; the background crossfades and the burst colors lerp between themes. devicePixelRatio-aware, keyboard-accessible switcher, honors `prefers-reduced-motion` (renders a calm static frame), and uses `motion` for the intro, theme blend, and dropdown.",
      "dependencies": [
        "motion",
        "lucide-react",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/hero-radial-burst.tsx",
          "type": "registry:component",
          "target": "components/ui/hero-radial-burst.tsx"
        }
      ]
    },
    {
      "name": "animated-tooltip",
      "type": "registry:ui",
      "title": "Animated Tooltip",
      "description": "An accessible, spring-animated tooltip with a customizable pointing arrow. Background, text, and arrow colours are independently configurable, and it follows WAI-ARIA guidance — hover/focus triggers, role=\"tooltip\", aria-describedby, and Escape to dismiss.",
      "dependencies": [
        "motion",
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "components/ui/animated-tooltip.tsx",
          "type": "registry:component",
          "target": "components/ui/animated-tooltip.tsx"
        }
      ]
    }
  ]
}