{
  "name": "magicui",
  "homepage": "https://magicui.design",
  "items": [
    {
      "name": "index",
      "type": "registry:style",
      "dependencies": [
        "class-variance-authority",
        "lucide-react"
      ],
      "devDependencies": [
        "tw-animate-css"
      ],
      "registryDependencies": [
        "utils"
      ],
      "files": [],
      "cssVars": {}
    },
    {
      "name": "magic-card",
      "type": "registry:ui",
      "title": "Magic Card",
      "description": "A spotlight effect that follows your mouse cursor and highlights borders on hover.",
      "dependencies": [
        "motion",
        "next-themes"
      ],
      "files": [
        {
          "path": "registry/magicui/magic-card.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "android",
      "type": "registry:ui",
      "title": "Android",
      "description": "A mockup of an Android device.",
      "files": [
        {
          "path": "registry/magicui/android.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "warp-background",
      "type": "registry:ui",
      "title": "Warp Background",
      "description": "A card with a time warping background effect.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/warp-background.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "line-shadow-text",
      "type": "registry:ui",
      "title": "Line Shadow Text",
      "description": "A text component with a moving line shadow.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/line-shadow-text.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-line-shadow": "line-shadow 15s linear infinite"
        }
      },
      "css": {
        "@keyframes line-shadow": {
          "0%": {
            "background-position": "0 0"
          },
          "100%": {
            "background-position": "100% -100%"
          }
        }
      }
    },
    {
      "name": "aurora-text",
      "type": "registry:ui",
      "title": "Aurora Text",
      "description": "A beautiful aurora text effect",
      "files": [
        {
          "path": "registry/magicui/aurora-text.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-aurora": "aurora 8s ease-in-out infinite alternate"
        }
      },
      "css": {
        "@keyframes aurora": {
          "0%": {
            "background-position": "0% 50%",
            "transform": "rotate(-5deg) scale(0.9)"
          },
          "25%": {
            "background-position": "50% 100%",
            "transform": "rotate(5deg) scale(1.1)"
          },
          "50%": {
            "background-position": "100% 50%",
            "transform": "rotate(-3deg) scale(0.95)"
          },
          "75%": {
            "background-position": "50% 0%",
            "transform": "rotate(3deg) scale(1.05)"
          },
          "100%": {
            "background-position": "0% 50%",
            "transform": "rotate(-5deg) scale(0.9)"
          }
        }
      }
    },
    {
      "name": "morphing-text",
      "type": "registry:ui",
      "title": "Morphing Text",
      "description": "A dynamic text morphing component for Magic UI.",
      "files": [
        {
          "path": "registry/magicui/morphing-text.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "scroll-progress",
      "type": "registry:ui",
      "title": "Scroll Progress",
      "description": "Animated Scroll Progress for your pages",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/scroll-progress.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "lens",
      "type": "registry:ui",
      "title": "Lens",
      "description": "A interactive component that enables zooming into images, videos and other elements.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/lens.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "pointer",
      "type": "registry:ui",
      "title": "Pointer",
      "description": "A component that displays a pointer when hovering over an element",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/pointer.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "smooth-cursor",
      "type": "registry:ui",
      "description": "A customizable, physics-based smooth cursor animation component with spring animations and rotation effects",
      "dependencies": [
        "framer-motion"
      ],
      "files": [
        {
          "path": "registry/magicui/smooth-cursor.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "progressive-blur",
      "type": "registry:ui",
      "title": "Progressive Blur",
      "description": "The Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.",
      "files": [
        {
          "path": "registry/magicui/progressive-blur.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "neon-gradient-card",
      "type": "registry:ui",
      "title": "Neon Gradient Card",
      "description": "A beautiful neon card effect",
      "files": [
        {
          "path": "registry/magicui/neon-gradient-card.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-background-position-spin": "background-position-spin 3000ms infinite alternate"
        }
      },
      "css": {
        "@keyframes background-position-spin": {
          "0%": {
            "background-position": "top center"
          },
          "100%": {
            "background-position": "bottom center"
          }
        }
      }
    },
    {
      "name": "noise-texture",
      "type": "registry:ui",
      "title": "Noise Texture",
      "description": "An SVG fractal noise layer using feTurbulence, desaturation, and contrast controls for subtle texture overlays.",
      "files": [
        {
          "path": "registry/magicui/noise-texture.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "meteors",
      "type": "registry:ui",
      "title": "Meteors",
      "description": "A meteor shower effect.",
      "files": [
        {
          "path": "registry/magicui/meteors.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-meteor": "meteor 5s linear infinite"
        }
      },
      "css": {
        "@keyframes meteor": {
          "0%": {
            "transform": "rotate(var(--angle)) translateX(0)",
            "opacity": "1"
          },
          "70%": {
            "opacity": "1"
          },
          "100%": {
            "transform": "rotate(var(--angle)) translateX(-500px)",
            "opacity": "0"
          }
        }
      }
    },
    {
      "name": "grid-pattern",
      "type": "registry:ui",
      "title": "Grid Pattern",
      "description": "A background grid pattern made with SVGs, fully customizable using Tailwind CSS.",
      "files": [
        {
          "path": "registry/magicui/grid-pattern.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "hexagon-pattern",
      "type": "registry:ui",
      "title": "Hexagon Pattern",
      "description": "A background hexagon pattern made with SVGs, fully customizable using Tailwind CSS.",
      "files": [
        {
          "path": "registry/magicui/hexagon-pattern.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "striped-pattern",
      "type": "registry:ui",
      "title": "Striped Pattern",
      "description": "A background striped pattern made with SVGs, fully customizable using Tailwind CSS.",
      "files": [
        {
          "path": "registry/magicui/striped-pattern.tsx",
          "type": "registry:ui",
          "target": "components/magicui/striped-pattern.tsx"
        }
      ]
    },
    {
      "name": "interactive-grid-pattern",
      "type": "registry:ui",
      "title": "Interactive Grid Pattern",
      "description": "A interactive background grid pattern made with SVGs, fully customizable using Tailwind CSS.",
      "files": [
        {
          "path": "registry/magicui/interactive-grid-pattern.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "dot-pattern",
      "type": "registry:ui",
      "title": "Dot Pattern",
      "description": "A background dot pattern made with SVGs, fully customizable using Tailwind CSS.",
      "files": [
        {
          "path": "registry/magicui/dot-pattern.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "flickering-grid",
      "type": "registry:ui",
      "title": "Flickering Grid",
      "description": "A flickering grid background made with SVGs, fully customizable using Tailwind CSS.",
      "files": [
        {
          "path": "registry/magicui/flickering-grid.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "hero-video-dialog",
      "type": "registry:ui",
      "title": "Hero Video Dialog",
      "description": "A hero video dialog component.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/hero-video-dialog.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "code-comparison",
      "type": "registry:ui",
      "title": "Code Comparison",
      "description": "A component which compares two code snippets.",
      "dependencies": [
        "shiki",
        "next-themes"
      ],
      "files": [
        {
          "path": "registry/magicui/code-comparison.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "marquee",
      "type": "registry:ui",
      "title": "Marquee",
      "description": "An infinite scrolling component that can be used to display text, images, or videos.",
      "files": [
        {
          "path": "registry/magicui/marquee.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-marquee": "marquee var(--duration) infinite linear",
          "animate-marquee-vertical": "marquee-vertical var(--duration) linear infinite"
        }
      },
      "css": {
        "@keyframes marquee": {
          "from": {
            "transform": "translateX(0)"
          },
          "to": {
            "transform": "translateX(calc(-100% - var(--gap)))"
          }
        },
        "@keyframes marquee-vertical": {
          "from": {
            "transform": "translateY(0)"
          },
          "to": {
            "transform": "translateY(calc(-100% - var(--gap)))"
          }
        }
      }
    },
    {
      "name": "globe",
      "type": "registry:ui",
      "title": "Globe",
      "description": "An autorotating, interactive, and highly performant globe made using WebGL.",
      "dependencies": [
        "cobe@^0.6.4",
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/globe.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "glyph-matrix",
      "type": "registry:ui",
      "title": "Glyph Matrix",
      "description": "An animated grid of subtly shifting glyphs with fade effect and theme support.",
      "files": [
        {
          "path": "registry/magicui/glyph-matrix.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "glare-hover",
      "type": "registry:ui",
      "title": "Glare Hover",
      "description": "A diagonal glare on hover using a ::before gradient and CSS variables (angle, size, duration, color).",
      "files": [
        {
          "path": "registry/magicui/glare-hover.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "shimmer-button",
      "type": "registry:ui",
      "title": "Shimmer Button",
      "description": "A button with a shimmering light which travels around the perimeter.",
      "files": [
        {
          "path": "registry/magicui/shimmer-button.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-shimmer-slide": "shimmer-slide var(--speed) ease-in-out infinite alternate",
          "animate-spin-around": "spin-around calc(var(--speed) * 2) infinite linear"
        }
      },
      "css": {
        "@keyframes shimmer-slide": {
          "to": {
            "transform": "translate(calc(100cqw - 100%), 0)"
          }
        },
        "@keyframes spin-around": {
          "0%": {
            "transform": "translateZ(0) rotate(0)"
          },
          "15%, 35%": {
            "transform": "translateZ(0) rotate(90deg)"
          },
          "65%, 85%": {
            "transform": "translateZ(0) rotate(270deg)"
          },
          "100%": {
            "transform": "translateZ(0) rotate(360deg)"
          }
        }
      }
    },
    {
      "name": "tweet-card",
      "type": "registry:ui",
      "title": "Tweet Card",
      "description": "A card that displays a tweet with the author's name, handle, and profile picture.",
      "dependencies": [
        "react-tweet"
      ],
      "files": [
        {
          "path": "registry/magicui/tweet-card.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "client-tweet-card",
      "type": "registry:ui",
      "title": "Client Tweet Card",
      "description": "A client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.",
      "dependencies": [
        "react-tweet"
      ],
      "files": [
        {
          "path": "registry/magicui/client-tweet-card.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "bento-grid",
      "type": "registry:ui",
      "title": "Bento Grid",
      "description": "Bento grid is a layout used to showcase the features of a product in a simple and elegant way.",
      "dependencies": [
        "@radix-ui/react-icons"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "registry/magicui/bento-grid.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "particles",
      "type": "registry:ui",
      "title": "Particles",
      "description": "Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.",
      "files": [
        {
          "path": "registry/magicui/particles.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "number-ticker",
      "type": "registry:ui",
      "title": "Number Ticker",
      "description": "Animate numbers to count up or down to a target number",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/number-ticker.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "ripple",
      "type": "registry:ui",
      "title": "Ripple",
      "description": "An animated ripple effect typically used behind elements to emphasize them.",
      "files": [
        {
          "path": "registry/magicui/ripple.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-ripple": "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite"
        }
      },
      "css": {
        "@keyframes ripple": {
          "0%, 100%": {
            "transform": "translate(-50%, -50%) scale(1)"
          },
          "50%": {
            "transform": "translate(-50%, -50%) scale(0.9)"
          }
        }
      }
    },
    {
      "name": "retro-grid",
      "type": "registry:ui",
      "title": "Retro Grid",
      "description": "An animated scrolling retro grid effect",
      "files": [
        {
          "path": "registry/magicui/retro-grid.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "animated-list",
      "type": "registry:ui",
      "title": "Animated List",
      "description": "A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/animated-list.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "animated-shiny-text",
      "type": "registry:ui",
      "title": "Animated Shiny Text",
      "description": "A light glare effect which pans across text making it appear as if it is shimmering.",
      "files": [
        {
          "path": "registry/magicui/animated-shiny-text.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-shiny-text": "shiny-text 8s infinite"
        }
      },
      "css": {
        "@keyframes shiny-text": {
          "0%, 90%, 100%": {
            "background-position": "calc(-100% - var(--shiny-width)) 0"
          },
          "30%, 60%": {
            "background-position": "calc(100% + var(--shiny-width)) 0"
          }
        }
      }
    },
    {
      "name": "animated-grid-pattern",
      "type": "registry:ui",
      "title": "Animated Grid Pattern",
      "description": "A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/animated-grid-pattern.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "border-beam",
      "type": "registry:ui",
      "title": "Border Beam",
      "description": "An animated beam of light which travels along the border of its container.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/border-beam.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "animated-beam",
      "type": "registry:ui",
      "title": "Animated Beam",
      "description": "An animated beam of light which travels along a path. Useful for showcasing the integration features of a website.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/animated-beam.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "text-reveal",
      "type": "registry:ui",
      "title": "Text Reveal",
      "description": "Fade in text as you scroll down the page.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/text-reveal.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "dia-text-reveal",
      "type": "registry:ui",
      "title": "Dia Text Reveal",
      "description": "A horizontal color band sweeps across text, revealing a gradient shine before settling on the base color.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/dia-text-reveal.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "hyper-text",
      "type": "registry:ui",
      "title": "Hyper Text",
      "description": "A text animation that scrambles letters before revealing the final text.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/hyper-text.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "animated-gradient-text",
      "type": "registry:ui",
      "title": "Animated Gradient Text",
      "description": "An animated gradient background which transitions between colors for text.",
      "files": [
        {
          "path": "registry/magicui/animated-gradient-text.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-gradient": "gradient 8s linear infinite"
        }
      },
      "css": {
        "@keyframes gradient": {
          "to": {
            "background-position": "var(--bg-size, 300%) 0"
          }
        }
      }
    },
    {
      "name": "orbiting-circles",
      "type": "registry:ui",
      "title": "Orbiting Circles",
      "description": "A collection of circles which move in orbit along a circular path",
      "files": [
        {
          "path": "registry/magicui/orbiting-circles.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-orbit": "orbit calc(var(--duration)*1s) linear infinite"
        }
      },
      "css": {
        "@keyframes orbit": {
          "0%": {
            "transform": "rotate(calc(var(--angle) * 1deg)) translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg))"
          },
          "100%": {
            "transform": "rotate(calc(var(--angle) * 1deg + 360deg)) translateY(calc(var(--radius) * 1px)) rotate(calc((var(--angle) * -1deg) - 360deg))"
          }
        }
      }
    },
    {
      "name": "dock",
      "type": "registry:ui",
      "title": "Dock",
      "description": "An implementation of the MacOS dock using react + tailwindcss + motion",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/dock.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "word-rotate",
      "type": "registry:ui",
      "title": "Word Rotate",
      "description": "A vertical rotation of words",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/word-rotate.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "avatar-circles",
      "type": "registry:ui",
      "title": "Avatar Circles",
      "description": "Overlapping circles of avatars.",
      "files": [
        {
          "path": "registry/magicui/avatar-circles.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "typing-animation",
      "type": "registry:ui",
      "title": "Typing Animation",
      "description": "Characters appearing in typed animation",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/typing-animation.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-blink-cursor": "blink-cursor 1.2s step-end infinite"
        }
      },
      "css": {
        "@keyframes blink-cursor": {
          "0%, 49%": {
            "opacity": "1"
          },
          "50%, 100%": {
            "opacity": "0"
          }
        }
      }
    },
    {
      "name": "sparkles-text",
      "type": "registry:ui",
      "title": "Sparkles Text",
      "description": "A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/sparkles-text.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "spinning-text",
      "type": "registry:ui",
      "title": "Spinning Text",
      "description": "The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/spinning-text.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "comic-text",
      "type": "registry:ui",
      "title": "Comic Text",
      "description": "Comic text animation",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/comic-text.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "icon-cloud",
      "type": "registry:ui",
      "title": "Icon Cloud",
      "description": "An interactive 3D tag cloud component",
      "dependencies": [],
      "files": [
        {
          "path": "registry/magicui/icon-cloud.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "text-animate",
      "type": "registry:ui",
      "title": "Text Animate",
      "description": "A text animation component that animates text using a variety of different animations.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/text-animate.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "scroll-based-velocity",
      "type": "registry:ui",
      "title": "Scroll Based Velocity",
      "description": "Scrolling text whose speed changes based on scroll speed",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/scroll-based-velocity.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "shiny-button",
      "type": "registry:ui",
      "title": "Shiny Button",
      "description": "A shiny button component with dynamic styles in the dark mode or light mode.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/shiny-button.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "shine-border",
      "type": "registry:ui",
      "title": "Shine Border",
      "description": "Shine border is an animated background border effect.",
      "files": [
        {
          "path": "registry/magicui/shine-border.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-shine": "shine var(--duration) infinite linear"
        }
      },
      "css": {
        "@keyframes shine": {
          "0%": {
            "background-position": "0% 0%"
          },
          "50%": {
            "background-position": "100% 100%"
          },
          "to": {
            "background-position": "0% 0%"
          }
        }
      }
    },
    {
      "name": "animated-circular-progress-bar",
      "type": "registry:ui",
      "title": "Animated Circular Progress Bar",
      "description": "Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.",
      "files": [
        {
          "path": "registry/magicui/animated-circular-progress-bar.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "confetti",
      "type": "registry:ui",
      "title": "Confetti",
      "description": "Confetti animations are best used to delight your users when something special happens",
      "dependencies": [
        "canvas-confetti",
        "@types/canvas-confetti"
      ],
      "registryDependencies": [
        "button"
      ],
      "files": [
        {
          "path": "registry/magicui/confetti.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "cool-mode",
      "type": "registry:ui",
      "title": "Cool Mode",
      "description": "Cool mode effect for buttons, links, and other DOMs",
      "files": [
        {
          "path": "registry/magicui/cool-mode.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "pulsating-button",
      "type": "registry:ui",
      "title": "Pulsating Button",
      "description": "An animated pulsating button useful for capturing attention of users.",
      "files": [
        {
          "path": "registry/magicui/pulsating-button.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-pulse": "pulse var(--duration) ease-out infinite",
          "animate-pulse-ripple": "pulse-ripple var(--duration) cubic-bezier(0.16, 1, 0.3, 1) infinite"
        }
      },
      "css": {
        "@keyframes pulse": {
          "0%, 100%": {
            "boxShadow": "0 0 0 0 var(--pulse-color, oklch(from var(--bg) l c h / 0.5))"
          },
          "50%": {
            "boxShadow": "0 0 0 var(--distance) var(--pulse-color, oklch(from var(--bg) l c h / 0.5))"
          }
        },
        "@keyframes pulse-ripple": {
          "0%": {
            "boxShadow": "0 0 0 0 oklch(from var(--pulse-color, var(--bg)) l c h / 1)"
          },
          "100%": {
            "boxShadow": "0 0 0 var(--distance) oklch(from var(--pulse-color, var(--bg)) l c h / 0)"
          }
        }
      }
    },
    {
      "name": "ripple-button",
      "type": "registry:ui",
      "title": "Ripple Button",
      "description": "An animated button with ripple useful for user engagement.",
      "files": [
        {
          "path": "registry/magicui/ripple-button.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-rippling": "rippling var(--duration) ease-out"
        }
      },
      "css": {
        "@keyframes rippling": {
          "0%": {
            "opacity": "1"
          },
          "100%": {
            "transform": "scale(2)",
            "opacity": "0"
          }
        }
      }
    },
    {
      "name": "file-tree",
      "type": "registry:ui",
      "title": "File Tree",
      "description": "A component used to showcase the folder and file structure of a directory.",
      "files": [
        {
          "path": "registry/magicui/file-tree.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "blur-fade",
      "type": "registry:ui",
      "title": "Blur Fade",
      "description": "Blur fade in and out animation. Used to smoothly fade in and out content.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/blur-fade.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "safari",
      "type": "registry:ui",
      "title": "Safari",
      "description": "A safari browser mockup to showcase your website.",
      "files": [
        {
          "path": "registry/magicui/safari.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "iphone",
      "type": "registry:ui",
      "title": "iPhone",
      "description": "A mockup of the iPhone",
      "files": [
        {
          "path": "registry/magicui/iphone.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "rainbow-button",
      "type": "registry:ui",
      "title": "Rainbow Button",
      "description": "An animated button with a rainbow effect.",
      "files": [
        {
          "path": "registry/magicui/rainbow-button.tsx",
          "type": "registry:ui"
        }
      ],
      "cssVars": {
        "theme": {
          "animate-rainbow": "rainbow var(--speed, 2s) infinite linear"
        },
        "light": {
          "color-1": "oklch(66.2% 0.225 25.9)",
          "color-2": "oklch(60.4% 0.26 302)",
          "color-3": "oklch(69.6% 0.165 251)",
          "color-4": "oklch(80.2% 0.134 225)",
          "color-5": "oklch(90.7% 0.231 133)"
        },
        "dark": {
          "color-1": "oklch(66.2% 0.225 25.9)",
          "color-2": "oklch(60.4% 0.26 302)",
          "color-3": "oklch(69.6% 0.165 251)",
          "color-4": "oklch(80.2% 0.134 225)",
          "color-5": "oklch(90.7% 0.231 133)"
        }
      },
      "css": {
        "@keyframes rainbow": {
          "0%": {
            "background-position": "0%"
          },
          "100%": {
            "background-position": "200%"
          }
        }
      }
    },
    {
      "name": "interactive-hover-button",
      "type": "registry:ui",
      "files": [
        {
          "path": "registry/magicui/interactive-hover-button.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "terminal",
      "type": "registry:ui",
      "title": "Terminal",
      "description": "A terminal component",
      "files": [
        {
          "path": "registry/magicui/terminal.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "video-text",
      "type": "registry:ui",
      "title": "Video Text",
      "description": "A component that displays text with a video playing in the background.",
      "files": [
        {
          "path": "registry/magicui/video-text.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "pixel-image",
      "type": "registry:ui",
      "title": "Pixel Image",
      "description": "A component that displays an image with a pixelated effect, creating a retro aesthetic.",
      "files": [
        {
          "path": "registry/magicui/pixel-image.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "highlighter",
      "type": "registry:ui",
      "title": "Highlighter",
      "description": "A text highlighter that mimics the effect of a human-drawn marker stroke.",
      "dependencies": [
        "motion",
        "rough-notation"
      ],
      "files": [
        {
          "path": "registry/magicui/highlighter.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "animated-theme-toggler",
      "type": "registry:ui",
      "title": "Theme Toggler",
      "description": "Theme toggle with View Transitions and animated clip-path masks (circle, polygons, star), optional viewport-centered origin.",
      "dependencies": [
        "lucide-react"
      ],
      "files": [
        {
          "path": "registry/magicui/animated-theme-toggler.tsx",
          "type": "registry:ui"
        }
      ],
      "css": {
        "::view-transition-old(root), ::view-transition-new(root)": {
          "animation": "none",
          "mix-blend-mode": "normal"
        }
      }
    },
    {
      "name": "light-rays",
      "type": "registry:ui",
      "title": "Light Rays",
      "description": "A component with animated light rays which shine down from above.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/light-rays.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "dotted-map",
      "type": "registry:ui",
      "title": "Dotted Map",
      "description": "A component with a dotted map.",
      "dependencies": [
        "svg-dotted-map"
      ],
      "files": [
        {
          "path": "registry/magicui/dotted-map.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "backlight",
      "type": "registry:ui",
      "title": "Backlight",
      "description": "A backlight glow effect for videos, images, and SVGs.",
      "dependencies": [],
      "files": [
        {
          "path": "registry/magicui/backlight.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "kinetic-text",
      "type": "registry:ui",
      "title": "Kinetic Text",
      "description": "A text component that animates font weight of characters on hover.",
      "dependencies": [],
      "files": [
        {
          "path": "registry/magicui/kinetic-text.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "text-3d-flip",
      "type": "registry:ui",
      "title": "Text 3D Flip",
      "description": "A text effect that flips each letter in 3D with a staggered animation on hover.",
      "dependencies": [
        "motion"
      ],
      "files": [
        {
          "path": "registry/magicui/text-3d-flip.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "magic-card-demo",
      "type": "registry:example",
      "title": "Magic Card Demo",
      "description": "Example showing a spotlight effect that follows your mouse cursor and highlights borders on hover.",
      "registryDependencies": [
        "@magicui/magic-card"
      ],
      "files": [
        {
          "path": "registry/example/magic-card-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "magic-card-demo-2",
      "type": "registry:example",
      "title": "Magic Card Demo 2",
      "description": "Example showing a magic card with an orb effect.",
      "registryDependencies": [
        "@magicui/magic-card",
        "@magicui/avatar-circles"
      ],
      "files": [
        {
          "path": "registry/example/magic-card-demo2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "android-demo",
      "type": "registry:example",
      "title": "Android Demo",
      "description": "Example showing a mockup of an Android device.",
      "registryDependencies": [
        "@magicui/android"
      ],
      "files": [
        {
          "path": "registry/example/android-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "android-demo-2",
      "type": "registry:example",
      "title": "Android Demo 2",
      "description": "Second example showing a mockup of an Android device.",
      "registryDependencies": [
        "@magicui/android"
      ],
      "files": [
        {
          "path": "registry/example/android-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "android-demo-3",
      "type": "registry:example",
      "title": "Android Demo 3",
      "description": "Third example showing a mockup of an Android device.",
      "registryDependencies": [
        "@magicui/android"
      ],
      "files": [
        {
          "path": "registry/example/android-demo-3.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "warp-background-demo",
      "type": "registry:example",
      "title": "Warp Background Demo",
      "description": "Example showing a card with a time warping background effect.",
      "registryDependencies": [
        "@magicui/warp-background"
      ],
      "files": [
        {
          "path": "registry/example/warp-background-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "line-shadow-text-demo",
      "type": "registry:example",
      "title": "Line Shadow Text Demo",
      "description": "Example showing a text component with a moving line shadow.",
      "registryDependencies": [
        "@magicui/line-shadow-text"
      ],
      "files": [
        {
          "path": "registry/example/line-shadow-text-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "aurora-text-demo",
      "type": "registry:example",
      "title": "Aurora Text Demo",
      "description": "Example showing a beautiful aurora text effect.",
      "registryDependencies": [
        "@magicui/aurora-text"
      ],
      "files": [
        {
          "path": "registry/example/aurora-text-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "morphing-text-demo",
      "type": "registry:example",
      "title": "Morphing Text Demo",
      "description": "Example showing a dynamic text morphing component.",
      "registryDependencies": [
        "@magicui/morphing-text"
      ],
      "files": [
        {
          "path": "registry/example/morphing-text-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "scroll-progress-demo",
      "type": "registry:example",
      "title": "Scroll Progress Demo",
      "description": "Example showing animated scroll progress for your pages.",
      "registryDependencies": [
        "@magicui/scroll-progress"
      ],
      "files": [
        {
          "path": "registry/example/scroll-progress-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "lens-demo",
      "type": "registry:example",
      "title": "Lens Demo",
      "description": "Example showing a lens effect component",
      "registryDependencies": [
        "button",
        "card",
        "@magicui/lens"
      ],
      "files": [
        {
          "path": "registry/example/lens-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "lens-demo-2",
      "type": "registry:example",
      "title": "Lens Demo 2",
      "description": "Second example showing a lens effect component",
      "registryDependencies": [
        "button",
        "card",
        "@magicui/lens"
      ],
      "files": [
        {
          "path": "registry/example/lens-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "lens-demo-3",
      "type": "registry:example",
      "title": "Lens Demo 3",
      "description": "Third example showing a lens effect component",
      "registryDependencies": [
        "button",
        "card",
        "@magicui/lens"
      ],
      "files": [
        {
          "path": "registry/example/lens-demo-3.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "pointer-demo-1",
      "type": "registry:example",
      "title": "Pointer Demo 1",
      "description": "Example showing a pointer effect component",
      "registryDependencies": [
        "@magicui/pointer"
      ],
      "files": [
        {
          "path": "registry/example/pointer-demo-1.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "smooth-cursor-demo",
      "type": "registry:example",
      "description": "Basic smooth cursor example",
      "registryDependencies": [
        "@magicui/smooth-cursor"
      ],
      "files": [
        {
          "path": "registry/example/smooth-cursor-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "progressive-blur-demo",
      "type": "registry:example",
      "title": "Progressive Blur Demo",
      "description": "Example showing progressive blur effect for scrollable content.",
      "registryDependencies": [
        "@magicui/progressive-blur"
      ],
      "files": [
        {
          "path": "registry/example/progressive-blur-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "neon-gradient-card-demo",
      "type": "registry:example",
      "title": "Neon Gradient Card Demo",
      "description": "Example showing a beautiful neon card effect.",
      "registryDependencies": [
        "@magicui/neon-gradient-card"
      ],
      "files": [
        {
          "path": "registry/example/neon-gradient-card-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "noise-texture-demo",
      "type": "registry:example",
      "title": "Noise Texture Demo",
      "description": "Example showing the SVG noise texture in a framed panel with a radial mask.",
      "registryDependencies": [
        "@magicui/noise-texture"
      ],
      "files": [
        {
          "path": "registry/example/noise-texture-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "noise-texture-demo-2",
      "type": "registry:example",
      "title": "Noise Texture Demo (newsletter card)",
      "description": "Example showing a newsletter signup card with email input over a noise texture.",
      "registryDependencies": [
        "@magicui/noise-texture",
        "button",
        "card",
        "input",
        "label"
      ],
      "files": [
        {
          "path": "registry/example/noise-texture-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "noise-texture-demo-3",
      "type": "registry:example",
      "title": "Noise Texture Demo (button)",
      "description": "Example showing NoiseTexture behind a button label inside a relative button.",
      "registryDependencies": [
        "@magicui/noise-texture",
        "button"
      ],
      "files": [
        {
          "path": "registry/example/noise-texture-demo-3.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "noise-texture-demo-4",
      "type": "registry:example",
      "title": "Noise Texture Demo (input)",
      "description": "Example showing a labeled input field with NoiseTexture filling the input container.",
      "registryDependencies": [
        "@magicui/noise-texture",
        "input",
        "label"
      ],
      "files": [
        {
          "path": "registry/example/noise-texture-demo-4.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "meteors-demo",
      "type": "registry:example",
      "title": "Meteors Demo",
      "description": "Example showing a meteor shower effect.",
      "registryDependencies": [
        "@magicui/meteors"
      ],
      "files": [
        {
          "path": "registry/example/meteors-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "grid-pattern-demo",
      "type": "registry:example",
      "title": "Grid Pattern Demo",
      "description": "Example showing a background grid pattern made with SVGs.",
      "registryDependencies": [
        "@magicui/grid-pattern"
      ],
      "files": [
        {
          "path": "registry/example/grid-pattern-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "striped-pattern-demo",
      "type": "registry:example",
      "title": "Striped Pattern Demo",
      "description": "Example showing a background striped pattern made with SVGs.",
      "registryDependencies": [
        "@magicui/striped-pattern"
      ],
      "files": [
        {
          "path": "registry/example/striped-pattern-demo.tsx",
          "type": "registry:example",
          "target": "components/striped-pattern-demo.tsx"
        }
      ]
    },
    {
      "name": "striped-pattern-dashed",
      "type": "registry:example",
      "title": "Striped Pattern (Dashed)",
      "description": "Example showing a background striped pattern with a dashed stroke.",
      "registryDependencies": [
        "@magicui/striped-pattern"
      ],
      "files": [
        {
          "path": "registry/example/striped-pattern-dashed.tsx",
          "type": "registry:example",
          "target": "components/striped-pattern-dashed.tsx"
        }
      ]
    },
    {
      "name": "striped-pattern-right",
      "type": "registry:example",
      "title": "Striped Pattern (Right)",
      "description": "Example showing a background striped pattern slanting to the right using SVG.",
      "registryDependencies": [
        "@magicui/striped-pattern"
      ],
      "files": [
        {
          "path": "registry/example/striped-pattern-right.tsx",
          "type": "registry:example",
          "target": "components/striped-pattern-right.tsx"
        }
      ]
    },
    {
      "name": "grid-pattern-linear-gradient",
      "type": "registry:example",
      "title": "Grid Pattern Linear Gradient",
      "description": "Example showing a grid pattern with linear gradient effects.",
      "registryDependencies": [
        "@magicui/grid-pattern"
      ],
      "files": [
        {
          "path": "registry/example/grid-pattern-linear-gradient.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "grid-pattern-dashed",
      "type": "registry:example",
      "title": "Grid Pattern Dashed",
      "description": "Example showing a dashed grid pattern.",
      "registryDependencies": [
        "@magicui/grid-pattern"
      ],
      "files": [
        {
          "path": "registry/example/grid-pattern-dashed.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "hexagon-pattern-demo",
      "type": "registry:example",
      "title": "Hexagon Pattern Demo",
      "description": "Example showing a background hexagon pattern made with SVGs.",
      "registryDependencies": [
        "@magicui/hexagon-pattern"
      ],
      "files": [
        {
          "path": "registry/example/hexagon-pattern-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "hexagon-pattern-linear-gradient",
      "type": "registry:example",
      "title": "Hexagon Pattern Linear Gradient",
      "description": "Example showing a hexagon pattern with linear gradient effects.",
      "registryDependencies": [
        "@magicui/hexagon-pattern"
      ],
      "files": [
        {
          "path": "registry/example/hexagon-pattern-linear-gradient.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "hexagon-pattern-dashed",
      "type": "registry:example",
      "title": "Hexagon Pattern Dashed",
      "description": "Example showing a dashed hexagon pattern.",
      "registryDependencies": [
        "@magicui/hexagon-pattern"
      ],
      "files": [
        {
          "path": "registry/example/hexagon-pattern-dashed.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "hexagon-pattern-spacing",
      "type": "registry:example",
      "title": "Hexagon Pattern Spacing",
      "description": "Example showing a hexagon pattern with extra spacing between cells.",
      "registryDependencies": [
        "@magicui/hexagon-pattern"
      ],
      "files": [
        {
          "path": "registry/example/hexagon-pattern-spacing.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "dot-pattern-demo",
      "type": "registry:example",
      "title": "Dot Pattern Demo",
      "description": "Example showing a background dot pattern made with SVGs.",
      "registryDependencies": [
        "@magicui/dot-pattern"
      ],
      "files": [
        {
          "path": "registry/example/dot-pattern-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "dot-pattern-linear-gradient",
      "type": "registry:example",
      "title": "Dot Pattern Linear Gradient",
      "description": "Example showing a dot pattern with linear gradient effects.",
      "registryDependencies": [
        "@magicui/dot-pattern"
      ],
      "files": [
        {
          "path": "registry/example/dot-pattern-linear-gradient.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "dot-pattern-with-glow-effect",
      "type": "registry:example",
      "title": "Dot Pattern with glow effect",
      "description": "Example showing a dot pattern with glow effect",
      "registryDependencies": [
        "@magicui/dot-pattern"
      ],
      "files": [
        {
          "path": "registry/example/dot-pattern-with-glow-effect.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "flickering-grid-demo",
      "type": "registry:example",
      "title": "Flickering Grid Demo",
      "description": "Example showing a flickering grid background.",
      "registryDependencies": [
        "@magicui/flickering-grid"
      ],
      "files": [
        {
          "path": "registry/example/flickering-grid-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "flickering-grid-rounded-demo",
      "type": "registry:example",
      "title": "Flickering Grid Rounded Demo",
      "description": "Example showing a flickering grid background with rounded corners.",
      "registryDependencies": [
        "@magicui/flickering-grid"
      ],
      "files": [
        {
          "path": "registry/example/flickering-grid-rounded-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "hero-video-dialog-demo",
      "type": "registry:example",
      "title": "Hero Video Dialog Demo",
      "description": "Example showing a hero video dialog component.",
      "registryDependencies": [
        "@magicui/hero-video-dialog"
      ],
      "files": [
        {
          "path": "registry/example/hero-video-dialog-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "hero-video-dialog-demo-top-in-bottom-out",
      "type": "registry:example",
      "title": "Hero Video Dialog Top In Bottom Out Demo",
      "description": "Example showing a hero video dialog with top-in bottom-out animation.",
      "registryDependencies": [
        "@magicui/hero-video-dialog"
      ],
      "files": [
        {
          "path": "registry/example/hero-video-dialog-demo-top-in-bottom-out.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "code-comparison-demo",
      "type": "registry:example",
      "title": "Code Comparison Demo",
      "description": "Example showing a component which compares two code snippets.",
      "registryDependencies": [
        "@magicui/code-comparison"
      ],
      "files": [
        {
          "path": "registry/example/code-comparison-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "marquee-demo",
      "type": "registry:example",
      "title": "Marquee Demo",
      "description": "Example showing an infinite scrolling component.",
      "registryDependencies": [
        "@magicui/marquee"
      ],
      "files": [
        {
          "path": "registry/example/marquee-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "marquee-demo-vertical",
      "type": "registry:example",
      "title": "Marquee Vertical Demo",
      "description": "Example showing a vertical infinite scrolling component.",
      "registryDependencies": [
        "@magicui/marquee"
      ],
      "files": [
        {
          "path": "registry/example/marquee-demo-vertical.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "marquee-logos",
      "type": "registry:example",
      "title": "Marquee Logos",
      "description": "Example showing an infinite scrolling logo carousel.",
      "registryDependencies": [
        "@magicui/marquee"
      ],
      "files": [
        {
          "path": "registry/example/marquee-logos.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "marquee-3d",
      "type": "registry:example",
      "title": "Marquee 3D",
      "description": "Example showing a 3D infinite scrolling component.",
      "registryDependencies": [
        "@magicui/marquee"
      ],
      "files": [
        {
          "path": "registry/example/marquee-3d.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "globe-demo",
      "type": "registry:example",
      "title": "Globe Demo",
      "description": "Example showing an autorotating, interactive WebGL globe.",
      "registryDependencies": [
        "@magicui/globe"
      ],
      "files": [
        {
          "path": "registry/example/globe-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "glyph-matrix-demo",
      "type": "registry:example",
      "title": "Glyph Matrix Demo",
      "description": "Example showing an animated grid of subtly shifting glyphs.",
      "dependencies": [
        "next-themes"
      ],
      "registryDependencies": [
        "@magicui/glyph-matrix"
      ],
      "files": [
        {
          "path": "registry/example/glyph-matrix-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "glare-hover-demo",
      "type": "registry:example",
      "title": "Glare Hover Demo",
      "description": "Pricing card with diagonal hover glare (duration 600ms).",
      "registryDependencies": [
        "@magicui/glare-hover"
      ],
      "files": [
        {
          "path": "registry/example/glare-hover-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "glare-hover-demo-cta",
      "type": "registry:example",
      "title": "Glare Hover Demo — CTA",
      "description": "CTA card with hover glare (700ms).",
      "registryDependencies": [
        "@magicui/glare-hover"
      ],
      "files": [
        {
          "path": "registry/example/glare-hover-demo-cta.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "glare-hover-demo-alert",
      "type": "registry:example",
      "title": "Glare Hover Demo — Alerts",
      "description": "Three alerts with custom glare colors and opacity.",
      "registryDependencies": [
        "@magicui/glare-hover"
      ],
      "files": [
        {
          "path": "registry/example/glare-hover-demo-alert.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "tweet-card-demo",
      "type": "registry:example",
      "title": "Tweet Card Demo",
      "description": "Example showing a tweet card with author info.",
      "registryDependencies": [
        "@magicui/client-tweet-card",
        "@magicui/tweet-card"
      ],
      "files": [
        {
          "path": "registry/example/tweet-card-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "tweet-card-images",
      "type": "registry:example",
      "title": "Tweet Card Images",
      "description": "Example showing a tweet card with images.",
      "registryDependencies": [
        "@magicui/client-tweet-card",
        "@magicui/tweet-card"
      ],
      "files": [
        {
          "path": "registry/example/tweet-card-images.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "tweet-card-meta-preview",
      "type": "registry:example",
      "title": "Tweet Card Meta Preview",
      "description": "Example showing a tweet card with meta preview.",
      "registryDependencies": [
        "@magicui/client-tweet-card",
        "@magicui/tweet-card"
      ],
      "files": [
        {
          "path": "registry/example/tweet-card-meta-preview.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "shimmer-button-demo",
      "type": "registry:example",
      "title": "Shimmer Button Demo",
      "description": "Example showing a button with a shimmering light effect.",
      "registryDependencies": [
        "@magicui/shimmer-button"
      ],
      "files": [
        {
          "path": "registry/example/shimmer-button-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "bento-demo",
      "type": "registry:example",
      "title": "Bento Demo",
      "description": "Example showing a bento grid layout for showcasing features.",
      "dependencies": [
        "@radix-ui/react-icons"
      ],
      "registryDependencies": [
        "button",
        "calendar",
        "@magicui/marquee",
        "@magicui/bento-grid",
        "@magicui/animated-beam",
        "@magicui/animated-list",
        "@magicui/animated-beam-multiple-outputs",
        "@magicui/animated-list-demo"
      ],
      "files": [
        {
          "path": "registry/example/bento-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "bento-demo-vertical",
      "type": "registry:example",
      "title": "Bento Vertical Demo",
      "description": "Example showing a vertical bento grid layout.",
      "dependencies": [
        "@radix-ui/react-icons"
      ],
      "registryDependencies": [
        "@magicui/bento-grid"
      ],
      "files": [
        {
          "path": "registry/example/bento-demo-vertical.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "number-ticker-demo",
      "type": "registry:example",
      "title": "Number Ticker Demo",
      "description": "Example showing animated counting numbers.",
      "registryDependencies": [
        "@magicui/number-ticker"
      ],
      "files": [
        {
          "path": "registry/example/number-ticker-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "number-ticker-demo-2",
      "type": "registry:example",
      "title": "Number Ticker Demo 2",
      "description": "Example showing animated counting numbers.",
      "registryDependencies": [
        "@magicui/number-ticker"
      ],
      "files": [
        {
          "path": "registry/example/number-ticker-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "number-ticker-decimal-demo",
      "type": "registry:example",
      "title": "Number Ticker Decimal Demo",
      "description": "Example showing animated counting decimal numbers.",
      "registryDependencies": [
        "@magicui/number-ticker"
      ],
      "files": [
        {
          "path": "registry/example/number-ticker-decimal-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "ripple-demo",
      "type": "registry:example",
      "title": "Ripple Demo",
      "description": "Example showing an animated ripple effect.",
      "registryDependencies": [
        "@magicui/ripple"
      ],
      "files": [
        {
          "path": "registry/example/ripple-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "retro-grid-demo",
      "type": "registry:example",
      "title": "Retro Grid Demo",
      "description": "Example showing an animated scrolling retro grid effect.",
      "registryDependencies": [
        "@magicui/retro-grid"
      ],
      "files": [
        {
          "path": "registry/example/retro-grid-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-list-demo",
      "type": "registry:example",
      "title": "Animated List Demo",
      "description": "Example showing a list with sequenced item animations.",
      "registryDependencies": [
        "@magicui/animated-list"
      ],
      "files": [
        {
          "path": "registry/example/animated-list-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-shiny-text-demo",
      "type": "registry:example",
      "title": "Animated Shiny Text Demo",
      "description": "Example showing text with a shimmering light effect.",
      "dependencies": [
        "@radix-ui/react-icons"
      ],
      "registryDependencies": [
        "@magicui/animated-shiny-text"
      ],
      "files": [
        {
          "path": "registry/example/animated-shiny-text-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "particles-demo",
      "type": "registry:example",
      "title": "Particles Demo",
      "description": "Example showing interactive particle effects.",
      "dependencies": [
        "next-themes"
      ],
      "registryDependencies": [
        "@magicui/particles"
      ],
      "files": [
        {
          "path": "registry/example/particles-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-grid-pattern-demo",
      "type": "registry:example",
      "title": "Animated Grid Pattern Demo",
      "description": "Example showing an animated grid pattern background.",
      "registryDependencies": [
        "@magicui/animated-grid-pattern"
      ],
      "files": [
        {
          "path": "registry/example/animated-grid-pattern-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "interactive-grid-pattern-demo",
      "type": "registry:example",
      "title": "Interactive Grid Pattern Demo",
      "description": "Example showing an interactive grid pattern background.",
      "registryDependencies": [
        "@magicui/interactive-grid-pattern"
      ],
      "files": [
        {
          "path": "registry/example/interactive-grid-pattern-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "interactive-grid-pattern-demo-2",
      "type": "registry:example",
      "title": "Interactive Grid Pattern Demo 2",
      "description": "Second example showing an interactive grid pattern background.",
      "registryDependencies": [
        "@magicui/interactive-grid-pattern"
      ],
      "files": [
        {
          "path": "registry/example/interactive-grid-pattern-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "border-beam-demo",
      "type": "registry:example",
      "title": "Border Beam Demo",
      "description": "Example showing an animated border beam effect.",
      "registryDependencies": [
        "@magicui/border-beam"
      ],
      "files": [
        {
          "path": "registry/example/border-beam-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "border-beam-demo-2",
      "type": "registry:example",
      "title": "Border Beam Demo",
      "description": "Example showing an animated border beam effect.",
      "registryDependencies": [
        "button",
        "card",
        "@magicui/border-beam"
      ],
      "files": [
        {
          "path": "registry/example/border-beam-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "border-beam-demo-3",
      "type": "registry:example",
      "title": "Border Beam Demo 3",
      "description": "Example showing an animated border beam effect.",
      "registryDependencies": [
        "button",
        "card",
        "input",
        "label",
        "@magicui/border-beam"
      ],
      "files": [
        {
          "path": "registry/example/border-beam-demo-3.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "border-beam-demo-4",
      "type": "registry:example",
      "title": "Border Beam Demo 4",
      "description": "Example showing an animated border beam effect.",
      "registryDependencies": [
        "button",
        "@magicui/border-beam"
      ],
      "files": [
        {
          "path": "registry/example/border-beam-demo-4.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-beam-demo",
      "type": "registry:example",
      "title": "Animated Beam Demo",
      "description": "Example showing an animated beam of light effect.",
      "dependencies": [
        "@radix-ui/react-icons"
      ],
      "registryDependencies": [
        "@magicui/animated-beam"
      ],
      "files": [
        {
          "path": "registry/example/animated-beam-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-beam-unidirectional",
      "type": "registry:example",
      "title": "Animated Beam Unidirectional",
      "description": "Example showing a unidirectional animated beam effect.",
      "registryDependencies": [
        "@magicui/animated-beam"
      ],
      "files": [
        {
          "path": "registry/example/animated-beam-unidirectional.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-beam-bidirectional",
      "type": "registry:example",
      "title": "Animated Beam Bidirectional",
      "description": "Example showing a bidirectional animated beam effect.",
      "registryDependencies": [
        "@magicui/animated-beam"
      ],
      "files": [
        {
          "path": "registry/example/animated-beam-bidirectional.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-beam-multiple-inputs",
      "type": "registry:example",
      "title": "Animated Beam Multiple Inputs",
      "description": "Example showing animated beams with multiple input points.",
      "registryDependencies": [
        "@magicui/animated-beam"
      ],
      "files": [
        {
          "path": "registry/example/animated-beam-multiple-inputs.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-beam-multiple-outputs",
      "type": "registry:example",
      "title": "Animated Beam Multiple Outputs",
      "description": "Example showing animated beams with multiple output points.",
      "registryDependencies": [
        "@magicui/animated-beam"
      ],
      "files": [
        {
          "path": "registry/example/animated-beam-multiple-outputs.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "text-reveal-demo",
      "type": "registry:example",
      "title": "Text Reveal Demo",
      "description": "Example showing text that fades in on scroll.",
      "registryDependencies": [
        "@magicui/text-reveal"
      ],
      "files": [
        {
          "path": "registry/example/text-reveal-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "dia-text-reveal-demo",
      "type": "registry:example",
      "title": "Dia Text Reveal Demo",
      "description": "Example showing a sweeping color band reveal on headline text.",
      "registryDependencies": [
        "@magicui/dia-text-reveal"
      ],
      "files": [
        {
          "path": "registry/example/dia-text-reveal-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "dia-text-reveal-demo-2",
      "type": "registry:example",
      "title": "Dia Text Reveal Demo 2",
      "description": "Custom gradient colors and settled text color on a light background.",
      "registryDependencies": [
        "@magicui/dia-text-reveal"
      ],
      "files": [
        {
          "path": "registry/example/dia-text-reveal-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "dia-text-reveal-demo-3",
      "type": "registry:example",
      "title": "Dia Text Reveal Demo 3",
      "description": "Rotating phrases with repeat and repeat delay.",
      "registryDependencies": [
        "@magicui/dia-text-reveal"
      ],
      "files": [
        {
          "path": "registry/example/dia-text-reveal-demo-3.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "dia-text-reveal-demo-4",
      "type": "registry:example",
      "title": "Dia Text Reveal Demo 4",
      "description": "Slower sweep with delay — custom duration and timing.",
      "registryDependencies": [
        "@magicui/dia-text-reveal"
      ],
      "files": [
        {
          "path": "registry/example/dia-text-reveal-demo-4.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-gradient-text-demo",
      "type": "registry:example",
      "title": "Animated Gradient Text Demo",
      "description": "Example showing text with animated gradient backgrounds.",
      "dependencies": [
        "lucide-react"
      ],
      "registryDependencies": [
        "@magicui/animated-gradient-text"
      ],
      "files": [
        {
          "path": "registry/example/animated-gradient-text-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-gradient-text-demo-2",
      "type": "registry:example",
      "title": "Animated Gradient Text Demo 2",
      "description": "Second example showing text with animated gradient backgrounds.",
      "registryDependencies": [
        "@magicui/animated-gradient-text"
      ],
      "files": [
        {
          "path": "registry/example/animated-gradient-text-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "orbiting-circles-demo",
      "type": "registry:example",
      "title": "Orbiting Circles Demo",
      "description": "Example showing circles moving in orbital paths.",
      "dependencies": [
        "@radix-ui/react-icons"
      ],
      "registryDependencies": [
        "@magicui/orbiting-circles"
      ],
      "files": [
        {
          "path": "registry/example/orbiting-circles-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "dock-demo",
      "type": "registry:example",
      "title": "Dock Demo",
      "description": "Example showing a MacOS-style dock implementation.",
      "dependencies": [
        "next-themes"
      ],
      "registryDependencies": [
        "button",
        "@magicui/dock"
      ],
      "files": [
        {
          "path": "registry/example/dock-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "dock-demo-2",
      "type": "registry:example",
      "title": "Dock Demo 2",
      "description": "Second example showing a MacOS-style dock implementation.",
      "registryDependencies": [
        "@magicui/dock"
      ],
      "files": [
        {
          "path": "registry/example/dock-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "dock-demo-3",
      "type": "registry:example",
      "title": "Dock Demo 3",
      "description": "Third example showing a MacOS-style dock implementation.",
      "registryDependencies": [
        "@magicui/dock"
      ],
      "files": [
        {
          "path": "registry/example/dock-demo-3.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "word-rotate-demo",
      "type": "registry:example",
      "title": "Word Rotate Demo",
      "description": "Example showing vertical word rotation animation.",
      "registryDependencies": [
        "@magicui/word-rotate"
      ],
      "files": [
        {
          "path": "registry/example/word-rotate-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "hyper-text-demo",
      "type": "registry:example",
      "title": "Hyper Text Demo",
      "description": "Example showing text with scrambling letter animations.",
      "registryDependencies": [
        "@magicui/hyper-text"
      ],
      "files": [
        {
          "path": "registry/example/hyper-text-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "avatar-circles-demo",
      "type": "registry:example",
      "title": "Avatar Circles Demo",
      "description": "Example showing overlapping avatar circles.",
      "registryDependencies": [
        "@magicui/avatar-circles"
      ],
      "files": [
        {
          "path": "registry/example/avatar-circles-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "typing-animation-demo",
      "type": "registry:example",
      "title": "Typing Animation Demo",
      "description": "Example showing typed character animations.",
      "registryDependencies": [
        "@magicui/typing-animation"
      ],
      "files": [
        {
          "path": "registry/example/typing-animation-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "typing-animation-demo-2",
      "type": "registry:example",
      "title": "Typing Animation Multiple Words",
      "description": "Example showing multiple words with looping.",
      "registryDependencies": [
        "@magicui/typing-animation"
      ],
      "files": [
        {
          "path": "registry/example/typing-animation-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "typing-animation-demo-3",
      "type": "registry:example",
      "title": "Typing Animation Custom Speed",
      "description": "Example showing custom typing and deleting speeds.",
      "registryDependencies": [
        "@magicui/typing-animation"
      ],
      "files": [
        {
          "path": "registry/example/typing-animation-demo-3.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "typing-animation-demo-4",
      "type": "registry:example",
      "title": "Typing Animation Start on View",
      "description": "Example showing animation that starts when in viewport.",
      "registryDependencies": [
        "@magicui/typing-animation"
      ],
      "files": [
        {
          "path": "registry/example/typing-animation-demo-4.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "typing-animation-demo-5",
      "type": "registry:example",
      "title": "Typing Animation Without Cursor",
      "description": "Example showing typing animation without cursor.",
      "registryDependencies": [
        "@magicui/typing-animation"
      ],
      "files": [
        {
          "path": "registry/example/typing-animation-demo-5.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "typing-animation-demo-6",
      "type": "registry:example",
      "title": "Typing Animation Single Play",
      "description": "Example showing single play without looping.",
      "registryDependencies": [
        "@magicui/typing-animation"
      ],
      "files": [
        {
          "path": "registry/example/typing-animation-demo-6.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "typing-animation-demo-7",
      "type": "registry:example",
      "title": "Typing Animation Cursor Blinking",
      "description": "Example showing cursor blinking control.",
      "registryDependencies": [
        "@magicui/typing-animation"
      ],
      "files": [
        {
          "path": "registry/example/typing-animation-demo-7.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "typing-animation-demo-8",
      "type": "registry:example",
      "title": "Typing Animation Cursor Styles",
      "description": "Example showing different cursor styles (line, block, underscore).",
      "registryDependencies": [
        "@magicui/typing-animation"
      ],
      "files": [
        {
          "path": "registry/example/typing-animation-demo-8.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "scroll-based-velocity-demo",
      "type": "registry:example",
      "title": "Scroll Based Velocity Demo",
      "description": "Example showing text speed changes based on scroll velocity.",
      "registryDependencies": [
        "@magicui/scroll-based-velocity"
      ],
      "files": [
        {
          "path": "registry/example/scroll-based-velocity-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "scroll-based-velocity-images-demo",
      "type": "registry:example",
      "title": "Scroll Based Velocity Images",
      "description": "Example showing Unsplash images scrolling with speed reacting to scroll velocity.",
      "registryDependencies": [
        "@magicui/scroll-based-velocity"
      ],
      "files": [
        {
          "path": "registry/example/scroll-based-velocity-images-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "sparkles-text-demo",
      "type": "registry:example",
      "title": "Sparkles Text Demo",
      "description": "Example showing text with animated sparkle effects.",
      "registryDependencies": [
        "@magicui/sparkles-text"
      ],
      "files": [
        {
          "path": "registry/example/sparkles-text-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "spinning-text-demo",
      "type": "registry:example",
      "title": "Spinning Text Demo",
      "description": "Example showing spinning text animation.",
      "registryDependencies": [
        "@magicui/spinning-text"
      ],
      "files": [
        {
          "path": "registry/example/spinning-text-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "spinning-text-demo-2",
      "type": "registry:example",
      "title": "Spinning Text Demo 2",
      "description": "Example showing spinning text animation.",
      "registryDependencies": [
        "@magicui/spinning-text"
      ],
      "files": [
        {
          "path": "registry/example/spinning-text-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "comic-text-demo",
      "type": "registry:example",
      "title": "Comic Text Demo",
      "description": "Example showing comic text animation.",
      "registryDependencies": [
        "@magicui/comic-text"
      ],
      "files": [
        {
          "path": "registry/example/comic-text-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "icon-cloud-demo",
      "type": "registry:example",
      "title": "Icon Cloud Demo",
      "description": "Example showing an interactive 3D icon cloud.",
      "registryDependencies": [
        "@magicui/icon-cloud"
      ],
      "files": [
        {
          "path": "registry/example/icon-cloud-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "icon-cloud-demo-2",
      "type": "registry:example",
      "title": "Icon Cloud Demo 2",
      "description": "Second example showing an interactive 3D icon cloud.",
      "registryDependencies": [
        "@magicui/icon-cloud"
      ],
      "files": [
        {
          "path": "registry/example/icon-cloud-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "icon-cloud-demo-3",
      "type": "registry:example",
      "title": "Icon Cloud Demo 3",
      "description": "Third example showing an interactive 3D icon cloud.",
      "registryDependencies": [
        "@magicui/icon-cloud"
      ],
      "files": [
        {
          "path": "registry/example/icon-cloud-demo-3.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "text-animate-demo",
      "type": "registry:example",
      "title": "Text Animate Demo",
      "description": "Example showing various text animations.",
      "registryDependencies": [
        "@magicui/text-animate"
      ],
      "files": [
        {
          "path": "registry/example/text-animate-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "text-animate-demo-2",
      "type": "registry:example",
      "title": "Text Animate Demo 2",
      "description": "Second example showing various text animations.",
      "registryDependencies": [
        "@magicui/text-animate"
      ],
      "files": [
        {
          "path": "registry/example/text-animate-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "text-animate-demo-3",
      "type": "registry:example",
      "title": "Text Animate Demo 3",
      "description": "Third example showing various text animations.",
      "registryDependencies": [
        "@magicui/text-animate"
      ],
      "files": [
        {
          "path": "registry/example/text-animate-demo-3.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "text-animate-demo-4",
      "type": "registry:example",
      "title": "Text Animate Demo 4",
      "description": "Fourth example showing various text animations.",
      "registryDependencies": [
        "@magicui/text-animate"
      ],
      "files": [
        {
          "path": "registry/example/text-animate-demo-4.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "text-animate-demo-5",
      "type": "registry:example",
      "title": "Text Animate Demo 5",
      "description": "Fifth example showing various text animations.",
      "registryDependencies": [
        "@magicui/text-animate"
      ],
      "files": [
        {
          "path": "registry/example/text-animate-demo-5.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "text-animate-demo-6",
      "type": "registry:example",
      "title": "Text Animate Demo 6",
      "description": "Sixth example showing various text animations.",
      "registryDependencies": [
        "@magicui/text-animate"
      ],
      "files": [
        {
          "path": "registry/example/text-animate-demo-6.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "text-animate-demo-7",
      "type": "registry:example",
      "title": "Text Animate Demo 7",
      "description": "Seventh example showing various text animations.",
      "registryDependencies": [
        "@magicui/text-animate"
      ],
      "files": [
        {
          "path": "registry/example/text-animate-demo-7.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "text-animate-demo-8",
      "type": "registry:example",
      "title": "Text Animate Demo 8",
      "description": "Eighth example showing various text animations.",
      "registryDependencies": [
        "@magicui/text-animate"
      ],
      "files": [
        {
          "path": "registry/example/text-animate-demo-8.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "text-animate-demo-9",
      "type": "registry:example",
      "title": "Text Animate Demo 9",
      "description": "Ninth example showing various text animations.",
      "registryDependencies": [
        "@magicui/text-animate"
      ],
      "files": [
        {
          "path": "registry/example/text-animate-demo-9.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "shiny-button-demo",
      "type": "registry:example",
      "title": "Shiny Button Demo",
      "description": "Example showing a shiny button with dynamic styles.",
      "registryDependencies": [
        "@magicui/shiny-button"
      ],
      "files": [
        {
          "path": "registry/example/shiny-button-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-circular-progress-bar-demo",
      "type": "registry:example",
      "title": "Animated Circular Progress Bar Demo",
      "description": "Example showing an animated circular progress gauge.",
      "registryDependencies": [
        "@magicui/animated-circular-progress-bar"
      ],
      "files": [
        {
          "path": "registry/example/animated-circular-progress-bar-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "shine-border-demo",
      "type": "registry:example",
      "title": "Shine Border Demo",
      "description": "Example showing an animated shining border effect.",
      "registryDependencies": [
        "@magicui/shine-border"
      ],
      "files": [
        {
          "path": "registry/example/shine-border-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "shine-border-demo-2",
      "type": "registry:example",
      "title": "Shine Border Demo 2",
      "description": "Second example showing an animated shining border effect.",
      "registryDependencies": [
        "@magicui/shine-border"
      ],
      "files": [
        {
          "path": "registry/example/shine-border-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "confetti-demo",
      "type": "registry:example",
      "title": "Confetti Demo",
      "description": "Example showing confetti animations for celebrations.",
      "registryDependencies": [
        "@magicui/confetti"
      ],
      "files": [
        {
          "path": "registry/example/confetti-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "confetti-basic-cannon",
      "type": "registry:example",
      "title": "Confetti Basic Cannon",
      "description": "Example showing basic confetti cannon animation.",
      "registryDependencies": [
        "@magicui/confetti"
      ],
      "files": [
        {
          "path": "registry/example/confetti-basic-cannon.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "confetti-random-direction",
      "type": "registry:example",
      "title": "Confetti Random Direction",
      "description": "Example showing confetti with random directions.",
      "registryDependencies": [
        "@magicui/confetti"
      ],
      "files": [
        {
          "path": "registry/example/confetti-random-direction.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "confetti-fireworks",
      "type": "registry:example",
      "title": "Confetti Fireworks",
      "description": "Example showing fireworks-style confetti animation.",
      "registryDependencies": [
        "@magicui/confetti"
      ],
      "files": [
        {
          "path": "registry/example/confetti-fireworks.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "confetti-stars",
      "type": "registry:example",
      "title": "Confetti Stars",
      "description": "Example showing star-shaped confetti animation.",
      "registryDependencies": [
        "@magicui/confetti"
      ],
      "files": [
        {
          "path": "registry/example/confetti-stars.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "confetti-side-cannons",
      "type": "registry:example",
      "title": "Confetti Side Cannons",
      "description": "Example showing side-mounted confetti cannons.",
      "registryDependencies": [
        "@magicui/confetti"
      ],
      "files": [
        {
          "path": "registry/example/confetti-side-cannons.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "confetti-custom-shapes",
      "type": "registry:example",
      "title": "Confetti Custom Shapes",
      "description": "Example showing confetti with custom shape particles.",
      "registryDependencies": [
        "@magicui/confetti"
      ],
      "files": [
        {
          "path": "registry/example/confetti-custom-shapes.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "confetti-emoji",
      "type": "registry:example",
      "title": "Confetti Emoji",
      "description": "Example showing confetti with emoji particles.",
      "registryDependencies": [
        "@magicui/confetti"
      ],
      "files": [
        {
          "path": "registry/example/confetti-emoji.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "cool-mode-demo",
      "type": "registry:example",
      "title": "Cool Mode Demo",
      "description": "Example showing cool mode effect for buttons and links.",
      "registryDependencies": [
        "@magicui/cool-mode"
      ],
      "files": [
        {
          "path": "registry/example/cool-mode-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "cool-mode-custom",
      "type": "registry:example",
      "title": "Cool Mode Custom",
      "description": "Example showing customized cool mode effects.",
      "registryDependencies": [
        "@magicui/cool-mode"
      ],
      "files": [
        {
          "path": "registry/example/cool-mode-custom.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "pulsating-button-demo",
      "type": "registry:example",
      "title": "Pulsating Button Demo",
      "description": "Example showing an animated pulsating button.",
      "registryDependencies": [
        "@magicui/pulsating-button"
      ],
      "files": [
        {
          "path": "registry/example/pulsating-button-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "pulsating-button-demo-2",
      "type": "registry:example",
      "title": "Pulsating Button Demo 2",
      "description": "Example showing an animated pulsating button with a ripple varaint.",
      "registryDependencies": [
        "@magicui/pulsating-button"
      ],
      "files": [
        {
          "path": "registry/example/pulsating-button-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "ripple-button-demo",
      "type": "registry:example",
      "title": "Ripple Button Demo",
      "description": "Example showing an animated button with ripple effect.",
      "registryDependencies": [
        "@magicui/ripple-button"
      ],
      "files": [
        {
          "path": "registry/example/ripple-button-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "file-tree-demo",
      "type": "registry:example",
      "title": "File Tree Demo",
      "description": "Example showing a component that displays folder and file structure.",
      "registryDependencies": [
        "@magicui/file-tree"
      ],
      "files": [
        {
          "path": "registry/example/file-tree-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "blur-fade-demo",
      "type": "registry:example",
      "title": "Blur Fade Demo",
      "description": "Example showing blur fade in and out animations.",
      "registryDependencies": [
        "@magicui/blur-fade"
      ],
      "files": [
        {
          "path": "registry/example/blur-fade-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "blur-fade-text-demo",
      "type": "registry:example",
      "title": "Blur Fade Text Demo",
      "description": "Example showing blur fade animations with text.",
      "registryDependencies": [
        "@magicui/blur-fade"
      ],
      "files": [
        {
          "path": "registry/example/blur-fade-text-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "safari-demo",
      "type": "registry:example",
      "title": "Safari Demo",
      "description": "Example showing a Safari browser mockup.",
      "registryDependencies": [
        "@magicui/safari"
      ],
      "files": [
        {
          "path": "registry/example/safari-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "safari-demo-2",
      "type": "registry:example",
      "title": "Safari Demo 2",
      "description": "Second example showing a Safari browser mockup.",
      "registryDependencies": [
        "@magicui/safari"
      ],
      "files": [
        {
          "path": "registry/example/safari-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "safari-demo-3",
      "type": "registry:example",
      "title": "Safari Demo 3",
      "description": "Third example showing a Safari browser mockup.",
      "registryDependencies": [
        "@magicui/safari"
      ],
      "files": [
        {
          "path": "registry/example/safari-demo-3.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "safari-demo-4",
      "type": "registry:example",
      "title": "Safari Demo 4",
      "description": "Fourth example showing a Safari browser mockup.",
      "registryDependencies": [
        "@magicui/safari"
      ],
      "files": [
        {
          "path": "registry/example/safari-demo-4.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "iphone-demo",
      "type": "registry:example",
      "title": "iPhone Demo",
      "description": "Example showing an iPhone mockup.",
      "registryDependencies": [
        "@magicui/iphone"
      ],
      "files": [
        {
          "path": "registry/example/iphone-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "iphone-demo-2",
      "type": "registry:example",
      "title": "iPhone Demo 2",
      "description": "Second example showing an iPhone mockup.",
      "registryDependencies": [
        "@magicui/iphone"
      ],
      "files": [
        {
          "path": "registry/example/iphone-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "iphone-demo-3",
      "type": "registry:example",
      "title": "iPhone Demo 3",
      "description": "Third example showing an iPhone mockup.",
      "registryDependencies": [
        "@magicui/iphone"
      ],
      "files": [
        {
          "path": "registry/example/iphone-demo-3.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "rainbow-button-demo",
      "type": "registry:example",
      "title": "Rainbow Button Demo",
      "description": "Example showing an animated button with rainbow effect.",
      "registryDependencies": [
        "@magicui/rainbow-button"
      ],
      "files": [
        {
          "path": "registry/example/rainbow-button-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "rainbow-button-demo-2",
      "type": "registry:example",
      "title": "Rainbow Button Demo 2",
      "description": "Example showing an animated button with rainbow effect.",
      "registryDependencies": [
        "@magicui/rainbow-button"
      ],
      "files": [
        {
          "path": "registry/example/rainbow-button-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "interactive-hover-button-demo",
      "type": "registry:example",
      "title": "Interactive Hover Button Demo",
      "description": "Example showing an interactive button with hover effects.",
      "registryDependencies": [
        "@magicui/interactive-hover-button"
      ],
      "files": [
        {
          "path": "registry/example/interactive-hover-button-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "terminal-demo",
      "type": "registry:example",
      "title": "Terminal Demo",
      "description": "Example showing a terminal with animated text.",
      "registryDependencies": [
        "@magicui/terminal"
      ],
      "files": [
        {
          "path": "registry/example/terminal-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "terminal-demo-2",
      "type": "registry:example",
      "title": "Terminal Demo",
      "description": "Example showing a terminal with animated text and custom delays",
      "registryDependencies": [
        "@magicui/terminal"
      ],
      "files": [
        {
          "path": "registry/example/terminal-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "video-text-demo",
      "type": "registry:example",
      "title": "Video Text Demo",
      "description": "Example showing text with a video background.",
      "registryDependencies": [
        "@magicui/video-text"
      ],
      "files": [
        {
          "path": "registry/example/video-text-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "pixel-image-demo",
      "type": "registry:example",
      "title": "Pixel Image Demo",
      "description": "Example showing a pixelated image effect.",
      "registryDependencies": [
        "@magicui/pixel-image"
      ],
      "files": [
        {
          "path": "registry/example/pixel-image-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "highlighter-demo",
      "type": "registry:example",
      "title": "Highlighter Demo",
      "description": "Example showing the demo of a Highlighter",
      "dependencies": [
        "motion",
        "rough-notation"
      ],
      "registryDependencies": [
        "@magicui/highlighter"
      ],
      "files": [
        {
          "path": "registry/example/highlighter-demo.tsx",
          "type": "registry:example"
        },
        {
          "path": "registry/magicui/highlighter.tsx",
          "type": "registry:ui"
        }
      ]
    },
    {
      "name": "animated-theme-toggler-demo",
      "type": "registry:example",
      "title": "Animated Theme Toggler Demo",
      "description": "Example showing animation while changing the theme.",
      "registryDependencies": [
        "@magicui/animated-theme-toggler"
      ],
      "files": [
        {
          "path": "registry/example/animated-theme-toggler-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-theme-toggler-square-demo",
      "type": "registry:example",
      "title": "Animated Theme Toggler — Square",
      "description": "Theme transition with a square clip reveal.",
      "registryDependencies": [
        "@magicui/animated-theme-toggler"
      ],
      "files": [
        {
          "path": "registry/example/animated-theme-toggler-square-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-theme-toggler-diamond-demo",
      "type": "registry:example",
      "title": "Animated Theme Toggler — Diamond",
      "description": "Theme transition with a diamond-shaped clip reveal.",
      "registryDependencies": [
        "@magicui/animated-theme-toggler"
      ],
      "files": [
        {
          "path": "registry/example/animated-theme-toggler-diamond-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-theme-toggler-rectangle-demo",
      "type": "registry:example",
      "title": "Animated Theme Toggler — Rectangle",
      "description": "Theme transition with a rectangle clip reveal.",
      "registryDependencies": [
        "@magicui/animated-theme-toggler"
      ],
      "files": [
        {
          "path": "registry/example/animated-theme-toggler-rectangle-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-theme-toggler-hexagon-demo",
      "type": "registry:example",
      "title": "Animated Theme Toggler — Hexagon",
      "description": "Theme transition with a hexagon clip reveal.",
      "registryDependencies": [
        "@magicui/animated-theme-toggler"
      ],
      "files": [
        {
          "path": "registry/example/animated-theme-toggler-hexagon-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-theme-toggler-triangle-demo",
      "type": "registry:example",
      "title": "Animated Theme Toggler — Triangle",
      "description": "Theme transition with a triangle clip reveal.",
      "registryDependencies": [
        "@magicui/animated-theme-toggler"
      ],
      "files": [
        {
          "path": "registry/example/animated-theme-toggler-triangle-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-theme-toggler-star-demo",
      "type": "registry:example",
      "title": "Animated Theme Toggler — Star",
      "description": "Theme transition with a star-shaped clip reveal.",
      "registryDependencies": [
        "@magicui/animated-theme-toggler"
      ],
      "files": [
        {
          "path": "registry/example/animated-theme-toggler-star-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "animated-theme-toggler-next-themes-demo",
      "type": "registry:example",
      "title": "Animated Theme Toggler — next-themes",
      "description": "Controlled usage with next-themes so useTheme() subscribers stay in sync on toggle.",
      "dependencies": [
        "next-themes"
      ],
      "registryDependencies": [
        "@magicui/animated-theme-toggler"
      ],
      "files": [
        {
          "path": "registry/example/animated-theme-toggler-next-themes-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "light-rays-demo",
      "type": "registry:example",
      "description": "Demo of the light-rays component showcasing animated light rays",
      "registryDependencies": [
        "@magicui/light-rays"
      ],
      "files": [
        {
          "path": "registry/example/light-rays-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "dotted-map-demo",
      "type": "registry:example",
      "title": "Dotted Map Demo",
      "description": "Example showing a dotted map.",
      "dependencies": [
        "countries-list"
      ],
      "registryDependencies": [
        "@magicui/dotted-map"
      ],
      "files": [
        {
          "path": "registry/example/dotted-map-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "dotted-map-demo-2",
      "type": "registry:example",
      "title": "Dotted Map Demo 2",
      "description": "Example showing a dotted map.",
      "registryDependencies": [
        "@magicui/dotted-map"
      ],
      "files": [
        {
          "path": "registry/example/dotted-map-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "dotted-map-demo-3",
      "type": "registry:example",
      "title": "Dotted Map Demo 3",
      "description": "Example showing a dotted map with pulse animation.",
      "registryDependencies": [
        "@magicui/dotted-map"
      ],
      "files": [
        {
          "path": "registry/example/dotted-map-demo-3.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "backlight-video-demo",
      "type": "registry:example",
      "description": "An example of the backlight component with a video.",
      "registryDependencies": [
        "@magicui/backlight"
      ],
      "files": [
        {
          "path": "registry/example/backlight-video-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "backlight-image-demo",
      "type": "registry:example",
      "description": "An example of the backlight component with a image.",
      "registryDependencies": [
        "@magicui/backlight"
      ],
      "files": [
        {
          "path": "registry/example/backlight-image-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "backlight-svg-demo",
      "type": "registry:example",
      "description": "An example of the backlight component with SVGs.",
      "registryDependencies": [
        "@magicui/backlight"
      ],
      "files": [
        {
          "path": "registry/example/backlight-svg-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "kinetic-text-demo",
      "type": "registry:example",
      "description": "An example of the kinetic text component.",
      "registryDependencies": [
        "@magicui/kinetic-text"
      ],
      "files": [
        {
          "path": "registry/example/kinetic-text-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "text-3d-flip-demo",
      "type": "registry:example",
      "title": "Text 3D Flip Demo",
      "description": "Example showing a 3D text animation that rotates each letter on hover.",
      "registryDependencies": [
        "@magicui/text-3d-flip"
      ],
      "files": [
        {
          "path": "registry/example/text-3d-flip-demo.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "text-3d-flip-demo-2",
      "type": "registry:example",
      "title": "Text 3D Flip Demo 2",
      "description": "Example showing a 3D text flip with stagger from center.",
      "registryDependencies": [
        "@magicui/text-3d-flip"
      ],
      "files": [
        {
          "path": "registry/example/text-3d-flip-demo-2.tsx",
          "type": "registry:example"
        }
      ]
    },
    {
      "name": "utils",
      "type": "registry:lib",
      "dependencies": [
        "clsx",
        "tailwind-merge"
      ],
      "files": [
        {
          "path": "registry/lib/utils.ts",
          "type": "registry:lib"
        }
      ]
    }
  ]
}