{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glow-border-card",
  "type": "registry:ui",
  "dependencies": [],
  "files": [
    {
      "path": "components/ui/glow-border-card.tsx",
      "content": "'use client';\r\n\r\nimport React from 'react';\r\nimport { cn } from '@/lib/utils';\r\n\r\n/**\r\n * Props for the GlowBorderCard component\r\n */\r\nexport interface GlowBorderCardProps extends React.HTMLAttributes<HTMLDivElement> {\r\n    /**\r\n     * Content to display inside the card\r\n     */\r\n    children?: React.ReactNode;\r\n\r\n    /**\r\n     * Width of the card (CSS value)\r\n     * @default \"320px\"\r\n     */\r\n    width?: string;\r\n\r\n    /**\r\n     * Height of the card (CSS value). If not provided, uses aspect-ratio.\r\n     */\r\n    height?: string;\r\n\r\n    /**\r\n     * Aspect ratio of the card (e.g., \"1\", \"16/9\", \"4/3\")\r\n     * @default \"1\"\r\n     */\r\n    aspectRatio?: string;\r\n\r\n    /**\r\n     * Corner radius of the card\r\n     * @default \"0.75rem\"\r\n     */\r\n    borderRadius?: string;\r\n\r\n    /**\r\n     * Animation duration in seconds\r\n     * @default 4\r\n     */\r\n    animationDuration?: number;\r\n\r\n    /**\r\n     * Gradient colors array (up to 10 colors)\r\n     */\r\n    gradientColors?: string[];\r\n\r\n    /**\r\n     * Border width for the glow effect\r\n     * @default \"1.25em\"\r\n     */\r\n    borderWidth?: string;\r\n\r\n    /**\r\n     * Blur amount for the glow effect\r\n     * @default \"0.75em\"\r\n     */\r\n    blurAmount?: string;\r\n\r\n    /**\r\n     * Inset distance (negative values push the border outside)\r\n     * @default \"-1em\"\r\n     */\r\n    inset?: string;\r\n\r\n    /**\r\n     * Preset color themes\r\n     */\r\n    colorPreset?: 'nature' | 'ocean' | 'sunset' | 'aurora' | 'custom';\r\n\r\n    /**\r\n     * Whether animation is paused\r\n     * @default false\r\n     */\r\n    paused?: boolean;\r\n}\r\n\r\n// Preset gradient colors (10 colors each for smooth transitions)\r\nconst colorPresets: Record<string, string[]> = {\r\n    nature: ['#669900', '#88bb22', '#99cc33', '#aaddaa', '#ccee66', '#006699', '#228888', '#3399cc', '#55aacc', '#669900'],\r\n    ocean: ['#006699', '#1177aa', '#2288bb', '#3399cc', '#44aadd', '#55bbee', '#66ccff', '#44bbee', '#2299cc', '#006699'],\r\n    sunset: ['#ff6600', '#ff7711', '#ff8822', '#ff9900', '#ffaa22', '#ffbb44', '#ffcc00', '#ff9933', '#ff7722', '#ff6600'],\r\n    aurora: ['#00ff87', '#22ffaa', '#44ffcc', '#60efff', '#88ddff', '#bb99ff', '#dd77ee', '#ff68f0', '#ff55cc', '#00ff87'],\r\n    custom: ['#669900', '#99cc33', '#ccee66', '#006699', '#3399cc', '#990066', '#cc3399', '#ff6600', '#ff9900', '#ffcc00'],\r\n};\r\n\r\n/**\r\n * GlowBorderCard - A CSS-only animated glowing border card component\r\n * \r\n * Features a rotating conic gradient that creates a beautiful\r\n * aurora-like glow effect around the card edges.\r\n * Uses @property for smooth angle animation.\r\n */\r\nexport const GlowBorderCard = React.forwardRef<HTMLDivElement, GlowBorderCardProps>(\r\n    (\r\n        {\r\n            children,\r\n            className,\r\n            width = '320px',\r\n            height,\r\n            aspectRatio = '1',\r\n            borderRadius = '0.75rem',\r\n            animationDuration = 4,\r\n            gradientColors,\r\n            borderWidth = '1.25em',\r\n            blurAmount = '0.75em',\r\n            inset = '-1em',\r\n            colorPreset = 'custom',\r\n            paused = false,\r\n            style,\r\n            ...props\r\n        },\r\n        ref\r\n    ) => {\r\n        // Determine the gradient colors to use (up to 10)\r\n        const colors = gradientColors || colorPresets[colorPreset] || colorPresets.custom;\r\n\r\n        // Build color CSS variables (--glow-color-1 through --glow-color-10)\r\n        const colorVars: Record<string, string> = {};\r\n        for (let i = 0; i < 10; i++) {\r\n            colorVars[`--glow-color-${i + 1}`] = colors[i % colors.length];\r\n        }\r\n\r\n        return (\r\n            <div\r\n                ref={ref}\r\n                className={cn(\r\n                    // Base Container Layout\r\n                    \"relative overflow-hidden grid place-content-center isolate\",\r\n                    // Glass Effect Background\r\n                    \"bg-zinc-50/50 dark:bg-neutral-900/60 backdrop-blur-md\",\r\n                    // Custom className support\r\n                    className\r\n                )}\r\n                style={{\r\n                    width: width,\r\n                    height: height || 'auto',\r\n                    aspectRatio: height ? 'unset' : aspectRatio,\r\n                    borderRadius: borderRadius,\r\n                    '--glow-animation-duration': `${animationDuration}s`,\r\n                    ...colorVars,\r\n                    ...style,\r\n                } as React.CSSProperties}\r\n                {...props}\r\n            >\r\n                {/* \r\n                  The Glow Pseudo-Element Replacer \r\n                  Using a real div instead of ::before allows better Tailwind control \r\n                */}\r\n                <div\r\n                    className={cn(\r\n                        \"absolute -z-10\",\r\n                        // Inset logic handled by style or arbitrary values if fixed\r\n                        \"border-solid rounded-[inherit]\",\r\n                        // The Gradient Animation Class\r\n                        \"glow-conic\",\r\n                        // Pause State\r\n                        paused && \"[animation-play-state:paused]\"\r\n                    )}\r\n                    style={{\r\n                        inset: inset,\r\n                        borderWidth: borderWidth,\r\n                        filter: `blur(${blurAmount})`\r\n                    }}\r\n                />\r\n\r\n                {/* Content Container */}\r\n                <div\r\n                    className=\"relative z-10 w-full h-full bg-transparent flex items-center justify-center p-4\"\r\n                >\r\n                    {children}\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n);\r\n\r\nGlowBorderCard.displayName = 'GlowBorderCard';\r\n\r\nexport default GlowBorderCard;\r\n",
      "type": "registry:ui",
      "target": "components/ui/glow-border-card.tsx"
    }
  ]
}