{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dashboard-populate",
  "title": "Dashboard Populate",
  "description": "An empty dashboard cascades to life with KPI count-ups, bar bounces, line traces, and a donut fill.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/dashboard-populate/index.tsx",
      "content": "\"use client\";\n\nimport { interpolate, spring, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface DashboardPopulateProps {\n  accentColor?: string;\n  kpiTarget?: number;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\nconst MONO_FAMILY =\n  \"var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace\";\n\nconst STRUCTURE_END = 15;\n\nfunction formatNumber(n: number) {\n  return n.toLocaleString(\"en-US\");\n}\n\nconst BAR_VALUES = [0.55, 0.78, 0.42, 0.92, 0.66];\n\n// Hand-coded line chart points (in 0..100 viewBox space)\nconst LINE_POINTS: Array<[number, number]> = [\n  [0, 70],\n  [16, 55],\n  [32, 62],\n  [48, 38],\n  [64, 45],\n  [80, 22],\n  [100, 12],\n];\n\nfunction buildLinePath() {\n  return LINE_POINTS.map(([x, y], i) => `${i === 0 ? \"M\" : \"L\"}${x},${y}`).join(\n    \" \",\n  );\n}\n\nfunction Tile({\n  title,\n  children,\n  structureOpacity,\n}: {\n  title: string;\n  children: React.ReactNode;\n  structureOpacity: number;\n}) {\n  return (\n    <div\n      style={{\n        position: \"relative\",\n        background: \"linear-gradient(180deg, #131316 0%, #0d0d10 100%)\",\n        border: \"1px solid rgba(255,255,255,0.08)\",\n        borderRadius: 16,\n        padding: 24,\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 16,\n        opacity: structureOpacity,\n        boxShadow:\n          \"inset 0 1px 0 rgba(255,255,255,0.04), 0 20px 40px rgba(0,0,0,0.3)\",\n      }}\n    >\n      <div\n        style={{\n          fontSize: 12,\n          fontWeight: 500,\n          textTransform: \"uppercase\",\n          letterSpacing: \"0.08em\",\n          color: \"rgba(255,255,255,0.5)\",\n        }}\n      >\n        {title}\n      </div>\n      <div style={{ flex: 1, position: \"relative\" }}>{children}</div>\n    </div>\n  );\n}\n\nexport function DashboardPopulate({\n  accentColor = \"#22c55e\",\n  kpiTarget = 128400,\n  speed = 1,\n  className,\n}: DashboardPopulateProps) {\n  const frame = useCurrentFrame() * speed;\n  const { fps } = useVideoConfig();\n\n  // Phase 1: structure fade in 0..15\n  const structureOpacity = interpolate(frame, [0, STRUCTURE_END], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  // KPI count up\n  const kpiSpring = spring({\n    frame: frame - STRUCTURE_END,\n    fps,\n    config: { damping: 20, stiffness: 80, mass: 1 },\n    durationInFrames: 60,\n  });\n  const kpiValue = Math.floor(kpiSpring * kpiTarget);\n  const kpiDelta = interpolate(kpiSpring, [0, 1], [0, 12.4]);\n\n  // Bar chart springs (staggered)\n  const barProgress = BAR_VALUES.map((_, i) =>\n    spring({\n      frame: frame - STRUCTURE_END - i * 4,\n      fps,\n      config: { damping: 11, stiffness: 140, mass: 1 },\n      durationInFrames: 40,\n    }),\n  );\n\n  // Line chart stroke-dashoffset\n  const linePath = buildLinePath();\n  // approx length for viewBox 100x100 — use a generous constant; we set\n  // pathLength on the path so dashoffset works in normalized units\n  const lineProgress = interpolate(\n    frame,\n    [STRUCTURE_END + 4, STRUCTURE_END + 50],\n    [0, 1],\n    { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n  );\n\n  // Donut\n  const donutTarget = 0.72;\n  const donutSpring = spring({\n    frame: frame - STRUCTURE_END - 6,\n    fps,\n    config: { damping: 13, stiffness: 110, mass: 1 },\n    durationInFrames: 50,\n  });\n  const donutValue = donutSpring * donutTarget;\n  const donutR = 70;\n  const donutCircum = 2 * Math.PI * donutR;\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background: \"#09090b\",\n        fontFamily: FONT_FAMILY,\n        color: \"white\",\n        padding: 64,\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 24,\n        overflow: \"hidden\",\n      }}\n    >\n      {/* Subtle grid bg */}\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          backgroundImage:\n            \"linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px)\",\n          backgroundSize: \"48px 48px\",\n        }}\n      />\n      <div\n        style={{\n          position: \"relative\",\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n          opacity: structureOpacity,\n        }}\n      >\n        <div>\n          <div\n            style={{\n              fontSize: 28,\n              fontWeight: 600,\n              letterSpacing: \"-0.02em\",\n            }}\n          >\n            Overview\n          </div>\n          <div\n            style={{\n              fontSize: 14,\n              opacity: 0.5,\n              marginTop: 4,\n            }}\n          >\n            Last 30 days\n          </div>\n        </div>\n        <div\n          style={{\n            display: \"flex\",\n            gap: 8,\n            fontSize: 12,\n            fontFamily: MONO_FAMILY,\n          }}\n        >\n          {[\"1D\", \"7D\", \"30D\", \"ALL\"].map((l, i) => (\n            <div\n              key={l}\n              style={{\n                padding: \"6px 12px\",\n                borderRadius: 8,\n                background:\n                  i === 2 ? \"rgba(255,255,255,0.1)\" : \"rgba(255,255,255,0.03)\",\n                border: \"1px solid rgba(255,255,255,0.06)\",\n              }}\n            >\n              {l}\n            </div>\n          ))}\n        </div>\n      </div>\n\n      <div\n        style={{\n          position: \"relative\",\n          flex: 1,\n          display: \"grid\",\n          gridTemplateColumns: \"1fr 1fr\",\n          gridTemplateRows: \"1fr 1fr\",\n          gap: 24,\n        }}\n      >\n        {/* KPI */}\n        <Tile title=\"Revenue\" structureOpacity={structureOpacity}>\n          <div\n            style={{\n              display: \"flex\",\n              flexDirection: \"column\",\n              gap: 12,\n              height: \"100%\",\n              justifyContent: \"center\",\n            }}\n          >\n            <div\n              style={{\n                fontSize: 64,\n                fontWeight: 700,\n                letterSpacing: \"-0.04em\",\n                fontVariantNumeric: \"tabular-nums\",\n                fontFamily: MONO_FAMILY,\n              }}\n            >\n              ${formatNumber(kpiValue)}\n            </div>\n            <div\n              style={{\n                display: \"flex\",\n                alignItems: \"center\",\n                gap: 8,\n                fontSize: 14,\n                color: accentColor,\n              }}\n            >\n              <span style={{ fontWeight: 600 }}>+{kpiDelta.toFixed(1)}%</span>\n              <span style={{ opacity: 0.5, color: \"white\" }}>\n                vs last month\n              </span>\n            </div>\n          </div>\n        </Tile>\n\n        {/* Bar chart */}\n        <Tile title=\"Sessions\" structureOpacity={structureOpacity}>\n          <svg\n            viewBox=\"0 0 200 100\"\n            preserveAspectRatio=\"none\"\n            style={{ width: \"100%\", height: \"100%\" }}\n          >\n            {/* axes */}\n            <line\n              x1=\"0\"\n              y1=\"100\"\n              x2=\"200\"\n              y2=\"100\"\n              stroke=\"rgba(255,255,255,0.15)\"\n              strokeWidth=\"0.5\"\n            />\n            {[25, 50, 75].map((y) => (\n              <line\n                key={y}\n                x1=\"0\"\n                y1={y}\n                x2=\"200\"\n                y2={y}\n                stroke=\"rgba(255,255,255,0.06)\"\n                strokeWidth=\"0.5\"\n                strokeDasharray=\"2 2\"\n              />\n            ))}\n            {BAR_VALUES.map((v, i) => {\n              const barH = v * 90 * barProgress[i];\n              const barW = 24;\n              const x = 16 + i * 36;\n              const y = 100 - barH;\n              return (\n                <rect\n                  key={i}\n                  x={x}\n                  y={y}\n                  width={barW}\n                  height={barH}\n                  rx={3}\n                  fill={accentColor}\n                  opacity={0.85}\n                />\n              );\n            })}\n          </svg>\n        </Tile>\n\n        {/* Line chart */}\n        <Tile title=\"Active users\" structureOpacity={structureOpacity}>\n          <svg\n            viewBox=\"0 0 100 100\"\n            preserveAspectRatio=\"none\"\n            style={{ width: \"100%\", height: \"100%\" }}\n          >\n            <line\n              x1=\"0\"\n              y1=\"100\"\n              x2=\"100\"\n              y2=\"100\"\n              stroke=\"rgba(255,255,255,0.15)\"\n              strokeWidth=\"0.4\"\n            />\n            {[20, 40, 60, 80].map((y) => (\n              <line\n                key={y}\n                x1=\"0\"\n                y1={y}\n                x2=\"100\"\n                y2={y}\n                stroke=\"rgba(255,255,255,0.06)\"\n                strokeWidth=\"0.4\"\n                strokeDasharray=\"1.5 1.5\"\n              />\n            ))}\n            <path\n              d={linePath}\n              fill=\"none\"\n              stroke={accentColor}\n              strokeWidth=\"1.6\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              pathLength={1}\n              strokeDasharray={1}\n              strokeDashoffset={1 - lineProgress}\n            />\n            {/* dots */}\n            {LINE_POINTS.map(([px, py], i) => {\n              const dotProgress = interpolate(\n                lineProgress,\n                [\n                  i / (LINE_POINTS.length - 1),\n                  i / (LINE_POINTS.length - 1) + 0.05,\n                ],\n                [0, 1],\n                { extrapolateLeft: \"clamp\", extrapolateRight: \"clamp\" },\n              );\n              return (\n                <circle\n                  key={i}\n                  cx={px}\n                  cy={py}\n                  r={1.2}\n                  fill={accentColor}\n                  opacity={dotProgress}\n                />\n              );\n            })}\n          </svg>\n        </Tile>\n\n        {/* Donut */}\n        <Tile title=\"Conversion\" structureOpacity={structureOpacity}>\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              height: \"100%\",\n              position: \"relative\",\n            }}\n          >\n            <svg width=\"180\" height=\"180\" viewBox=\"0 0 180 180\">\n              <circle\n                cx=\"90\"\n                cy=\"90\"\n                r={donutR}\n                fill=\"none\"\n                stroke=\"rgba(255,255,255,0.08)\"\n                strokeWidth=\"14\"\n              />\n              <circle\n                cx=\"90\"\n                cy=\"90\"\n                r={donutR}\n                fill=\"none\"\n                stroke={accentColor}\n                strokeWidth=\"14\"\n                strokeLinecap=\"round\"\n                strokeDasharray={`${donutCircum * donutValue} ${donutCircum}`}\n                transform=\"rotate(-90 90 90)\"\n              />\n            </svg>\n            <div\n              style={{\n                position: \"absolute\",\n                fontSize: 36,\n                fontWeight: 700,\n                letterSpacing: \"-0.02em\",\n                fontFamily: MONO_FAMILY,\n                fontVariantNumeric: \"tabular-nums\",\n              }}\n            >\n              {(donutValue * 100).toFixed(1)}%\n            </div>\n          </div>\n        </Tile>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/dashboard-populate.tsx"
    }
  ],
  "type": "registry:component"
}