{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-bar-chart",
  "title": "Animated Bar Chart",
  "description": "Bars spring up from the baseline in a staggered cascade.",
  "dependencies": ["remotion"],
  "files": [
    {
      "path": "registry/remocn/animated-bar-chart/index.tsx",
      "content": "\"use client\";\n\nimport { spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface AnimatedBarChartProps {\n  data?: number[];\n  labels?: string[];\n  width?: number;\n  height?: number;\n  barColor?: string;\n  gap?: number;\n  staggerFrames?: number;\n  speed?: number;\n  className?: string;\n}\n\nexport function AnimatedBarChart({\n  data = [35, 60, 45, 80, 55, 70, 90, 65],\n  labels,\n  width = 1000,\n  height = 500,\n  barColor = \"#0ea5e9\",\n  gap = 16,\n  staggerFrames = 6,\n  speed = 1,\n  className,\n}: AnimatedBarChartProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  const padding = 60;\n  const labelSpace = labels ? 40 : 0;\n  const innerWidth = width - padding * 2;\n  const innerHeight = height - padding * 2 - labelSpace;\n  const max = Math.max(...data);\n  const barWidth = (innerWidth - gap * (data.length - 1)) / data.length;\n  const baseY = padding + innerHeight;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        fontFamily:\n          \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n      }}\n    >\n      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>\n        {/* Baseline */}\n        <line\n          x1={padding}\n          x2={padding + innerWidth}\n          y1={baseY}\n          y2={baseY}\n          stroke=\"#27272a\"\n          strokeWidth={2}\n        />\n\n        {data.map((value, index) => {\n          const targetHeight = (value / max) * innerHeight;\n          const x = padding + index * (barWidth + gap);\n          const y = baseY - targetHeight;\n\n          const scaleY = spring({\n            frame: frame - index * staggerFrames,\n            fps,\n            config: { damping: 12, stiffness: 100, mass: 0.8 },\n            from: 0,\n            to: 1,\n          });\n\n          return (\n            <g key={index}>\n              <rect\n                x={x}\n                y={y}\n                width={barWidth}\n                height={targetHeight}\n                rx={6}\n                fill={barColor}\n                style={{\n                  transform: `scaleY(${scaleY})`,\n                  transformOrigin: `${x + barWidth / 2}px ${baseY}px`,\n                  transformBox: \"fill-box\",\n                  filter: `drop-shadow(0 4px 16px ${barColor}55)`,\n                }}\n              />\n              {labels?.[index] && (\n                <text\n                  x={x + barWidth / 2}\n                  y={baseY + 28}\n                  fill=\"#a1a1aa\"\n                  fontSize={16}\n                  textAnchor=\"middle\"\n                  style={{\n                    opacity: scaleY,\n                    fontFamily:\n                      \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\",\n                  }}\n                >\n                  {labels[index]}\n                </text>\n              )}\n            </g>\n          );\n        })}\n      </svg>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/animated-bar-chart.tsx"
    }
  ],
  "type": "registry:component"
}