{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-background-glass",
  "type": "registry:component",
  "title": "Animated Background Glass",
  "description": "Animated gradient background with floating orbs for glassmorphism UIs.\n * Provides an immersive atmosphere with theme-aware styling.\n *\n * ## Features",
  "dependencies": [
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "theme-provider"
  ],
  "files": [
    {
      "path": "components/glass/specialized/animated-background-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * AnimatedBackgroundGlass Component\n *\n * Animated gradient background with floating orbs for glassmorphism UIs.\n * Provides an immersive atmosphere with theme-aware styling.\n *\n * ## Features\n * - Theme-aware gradient background (glass/light/aurora)\n * - 5 floating animated orbs with blur effects\n * - Fixed positioning for full-page backgrounds\n * - Performance-optimized CSS animations (8s cycle)\n * - Configurable center orb visibility\n *\n * ## Orb Configuration\n * - **Orb 1:** Top-left, 600px, purple/blue tones\n * - **Orb 2:** Bottom-right, 700px, blue/violet tones, 2s delay\n * - **Orb 3:** Center-right, 500px, pink/cyan tones, 4s delay\n * - **Orb 4:** Bottom-left, 450px, cyan/violet tones, 6s delay\n * - **Orb 5:** Center, 500px, violet (glass theme only by default)\n *\n * ## CSS Variables\n * Customize colors via theme CSS variables:\n * - `--orb-1` through `--orb-5`: Orb colors (OKLCH with opacity)\n * - `--bg-from`, `--bg-via`, `--bg-to`: Gradient stops\n *\n * @example Basic usage\n * ```tsx\n * import { AnimatedBackgroundGlass } from 'shadcn-glass-ui'\n *\n * function App() {\n *   return (\n *     <>\n *       <AnimatedBackgroundGlass />\n *       <main className=\"relative z-10\">\n *         Your content here\n *       </main>\n *     </>\n *   )\n * }\n * ```\n *\n * @example With center orb forced on\n * ```tsx\n * <AnimatedBackgroundGlass showCenterOrb={true} />\n * ```\n *\n * @example With reduced opacity\n * ```tsx\n * <AnimatedBackgroundGlass className=\"opacity-50\" />\n * ```\n *\n * @example With dark overlay for better contrast\n * ```tsx\n * <>\n *   <AnimatedBackgroundGlass />\n *   <div className=\"fixed inset-0 bg-black/30 z-[1]\" />\n *   <main className=\"relative z-10\">Content</main>\n * </>\n * ```\n *\n * @accessibility\n * - Uses `aria-hidden=\"true\"` as purely decorative element\n * - Does not interfere with keyboard navigation\n * - No interactive elements within the component\n * - Animation uses CSS (respects `prefers-reduced-motion` when configured)\n *\n * @since v1.0.0\n */\n\nimport { forwardRef, type CSSProperties } from 'react';\nimport { cn } from '@/lib/utils';\nimport { useTheme } from '@/lib/theme-context';\nimport '@/glass-theme.css';\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\n/**\n * Props for AnimatedBackgroundGlass component.\n *\n * Extends standard div attributes (excluding `style`) for maximum flexibility.\n * The `style` prop is excluded because the component uses internal inline styles\n * for the gradient background.\n *\n * @example\n * ```tsx\n * const props: AnimatedBackgroundGlassProps = {\n *   showCenterOrb: true,\n *   className: 'opacity-75',\n * };\n * ```\n */\nexport interface AnimatedBackgroundGlassProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'style'\n> {\n  /**\n   * Whether to show the center orb (Orb 5).\n   *\n   * - In `glass` theme: defaults to `true`\n   * - In `light` and `aurora` themes: defaults to `false`\n   *\n   * Override to force visibility in any theme.\n   *\n   * @default undefined (auto-detected based on theme)\n   */\n  readonly showCenterOrb?: boolean;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const AnimatedBackgroundGlass = forwardRef<HTMLDivElement, AnimatedBackgroundGlassProps>(\n  ({ className, showCenterOrb, ...props }, ref) => {\n    const { theme } = useTheme();\n    const isGlass = theme === 'glass';\n\n    // Show center orb if explicitly set, or auto-show in glass theme\n    const shouldShowCenterOrb = showCenterOrb ?? isGlass;\n\n    const bgStyles: CSSProperties = {\n      background: 'linear-gradient(135deg, var(--bg-from), var(--bg-via), var(--bg-to))',\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn('fixed inset-0 transition-all duration-500 overflow-hidden', className)}\n        style={bgStyles}\n        aria-hidden=\"true\"\n        {...props}\n      >\n        {/* Orb 1 - top left purple (600px) */}\n        <div\n          className=\"absolute top-20 -left-20 w-[600px] h-[600px] rounded-full animate-orb-float\"\n          style={{ background: 'var(--orb-1)', filter: 'blur(80px)' }}\n        />\n        {/* Orb 2 - bottom right blue (700px) */}\n        <div\n          className=\"absolute -bottom-20 -right-20 w-[700px] h-[700px] rounded-full animate-orb-float\"\n          style={{ background: 'var(--orb-2)', filter: 'blur(100px)', animationDelay: '2s' }}\n        />\n        {/* Orb 3 - center right pink (500px) */}\n        <div\n          className=\"absolute top-1/3 -right-10 w-[500px] h-[500px] rounded-full animate-orb-float\"\n          style={{ background: 'var(--orb-3)', filter: 'blur(70px)', animationDelay: '4s' }}\n        />\n        {/* Orb 4 - bottom left cyan (450px) */}\n        <div\n          className=\"absolute -bottom-10 left-1/4 w-[450px] h-[450px] rounded-full animate-orb-float\"\n          style={{ background: 'var(--orb-4)', filter: 'blur(60px)', animationDelay: '6s' }}\n        />\n        {/* Orb 5 - center (configurable, default: glass theme only) */}\n        {shouldShowCenterOrb && (\n          <div\n            className=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rounded-full\"\n            style={{ background: 'var(--orb-5)', filter: 'blur(80px)' }}\n          />\n        )}\n      </div>\n    );\n  }\n);\n\nAnimatedBackgroundGlass.displayName = 'AnimatedBackgroundGlass';\n\n// ========================================\n// ALIAS\n// ========================================\n\n/**\n * AnimatedBackground - Alias for AnimatedBackgroundGlass\n */\nexport const AnimatedBackground = AnimatedBackgroundGlass;\n"
    }
  ],
  "categories": [
    "specialized"
  ]
}