{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "aurora-bars",
  "title": "Aurora Bars",
  "description": "Animated bars with aurora-inspired gradient effects and smooth transitions.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/components/unlumen/aurora-bars/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, useAnimationFrame } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface AuroraBarsProps {\n  /** @default 24 */\n  barCount?: number;\n  /** gradient color stops, bottom to top — @default [\"#ff2d78\", \"#c04aff\", \"#4a6fff\", \"#0a1aff\", \"#00000000\"] */\n  colors?: string[];\n  /** max bar height as fraction of container height — @default 0.92 */\n  maxHeightRatio?: number;\n  /** min bar height as fraction of container height — @default 0.18 */\n  minHeightRatio?: number;\n  /** undulation speed — @default 0.5 */\n  speed?: number;\n  /** @default 3 */\n  gap?: number;\n  /** px blur per bar, creates soft glow — @default 0 */\n  blur?: number;\n  /** @default \"#000000\" */\n  background?: string;\n  className?: string;\n}\n\n/** two sine waves per bar for organic movement */\nfunction barHeight(\n  index: number,\n  total: number,\n  time: number,\n  minH: number,\n  maxH: number,\n): number {\n  // Arch envelope: tallest in the centre, shorter on edges\n  // arch envelope: tallest in centre, shorter on edges\n  const norm = index / (total - 1);\n  const arch = Math.sin(norm * Math.PI);\n\n  const phase1 = (index / total) * Math.PI * 2;\n  const phase2 = (index / total) * Math.PI * 5.3;\n\n  const wave =\n    0.5 +\n    0.25 * Math.sin(time * 1.1 + phase1) +\n    0.25 * Math.sin(time * 0.7 + phase2);\n\n  const blended = arch * 0.65 + wave * 0.35;\n\n  return minH + blended * (maxH - minH);\n}\n\nexport function AuroraBars({\n  barCount = 24,\n  colors = [\"#ffd6eb\", \"#ff9acb\", \"#ff5aa6\", \"#ff2d78\", \"#00000000\"],\n  maxHeightRatio = 0.92,\n  minHeightRatio = 0.18,\n  speed = 0.5,\n  gap = 3,\n  blur = 0,\n  background = \"#000000\",\n  className,\n}: AuroraBarsProps) {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const [heights, setHeights] = React.useState<number[]>(() =>\n    Array.from({ length: barCount }, (_, i) =>\n      barHeight(i, barCount, 0, minHeightRatio, maxHeightRatio),\n    ),\n  );\n\n  const timeRef = React.useRef(0);\n\n  useAnimationFrame((_, delta) => {\n    timeRef.current += (delta / 1000) * speed;\n    const t = timeRef.current;\n    setHeights(\n      Array.from({ length: barCount }, (_, i) =>\n        barHeight(i, barCount, t, minHeightRatio, maxHeightRatio),\n      ),\n    );\n  });\n\n  const gradientStop = colors\n    .map((c, i) => `${c} ${Math.round((i / (colors.length - 1)) * 100)}%`)\n    .join(\", \");\n  const gradient = `linear-gradient(to top, ${gradientStop})`;\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\"relative w-full h-full overflow-hidden\", className)}\n      style={{ background }}\n    >\n      <div className=\"absolute inset-0 flex items-end\">\n        {Array.from({ length: barCount }).map((_, i) => {\n          const heightFraction = heights[i] ?? maxHeightRatio;\n          return (\n            <div\n              key={i}\n              className=\"flex-1\"\n              style={{\n                height: \"100%\",\n                display: \"flex\",\n                alignItems: \"flex-end\",\n                padding: `0 ${gap / 2}px`,\n              }}\n            >\n              <motion.div\n                style={{\n                  width: \"100%\",\n                  height: `${heightFraction * 100}%`,\n                  background: gradient,\n                  borderRadius: \"9999px 9999px 0 0\",\n                  filter: `blur(${blur}px)`,\n                  opacity: 0.85,\n                }}\n              />\n            </div>\n          );\n        })}\n      </div>\n\n      <div\n        className=\"absolute inset-0 pointer-events-none\"\n        style={{\n          background:\n            \"radial-gradient(ellipse 90% 80% at 50% 100%, transparent 40%, #000000cc 100%)\",\n        }}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/unlumen-ui/aurora-bars.tsx"
    }
  ],
  "type": "registry:ui"
}