{
  "$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/bases/editframe/components/dashboard-populate/index.tsx",
      "content": "\"use client\";\n\nimport { Timegroup } from \"@editframe/react\";\nimport type { CSSProperties } from \"react\";\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 BAR_VALUES = [0.55, 0.78, 0.42, 0.92, 0.66];\nconst LINE_POINTS: [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\nconst STRUCTURE_END = 15;\n\nconst buildLinePath = () =>\n  LINE_POINTS.map(([x, y], i) => `${i === 0 ? \"M\" : \"L\"}${x},${y}`).join(\" \");\n\nconst formatNumber = (n: number) => n.toLocaleString(\"en-US\");\n\nexport interface DashboardPopulateProps {\n  accentColor?: string;\n  kpiTarget?: number;\n  speed?: number;\n  fps?: number;\n  durationInFrames?: number;\n  width?: number;\n  height?: number;\n  className?: string;\n}\n\nconst Tile = ({\n  title,\n  children,\n  style,\n}: {\n  title: string;\n  children: React.ReactNode;\n  style?: CSSProperties;\n}) => (\n  <div\n    style={{\n      background: \"linear-gradient(180deg, #131316 0%, #0d0d10 100%)\",\n      border: \"1px solid rgba(255,255,255,0.08)\",\n      borderRadius: 16,\n      boxShadow:\n        \"inset 0 1px 0 rgba(255,255,255,0.04), 0 20px 40px rgba(0,0,0,0.3)\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: 16,\n      padding: 24,\n      position: \"relative\",\n      ...style,\n    }}\n  >\n    <div\n      style={{\n        color: \"rgba(255,255,255,0.5)\",\n        fontSize: 12,\n        fontWeight: 500,\n        letterSpacing: \"0.08em\",\n        textTransform: \"uppercase\",\n      }}\n    >\n      {title}\n    </div>\n    <div style={{ flex: 1, position: \"relative\" }}>{children}</div>\n  </div>\n);\n\nexport const DashboardPopulate = ({\n  accentColor = \"#22c55e\",\n  kpiTarget = 128_400,\n  speed = 1,\n  fps = 30,\n  durationInFrames = 180,\n  width = 1280,\n  height = 720,\n  className,\n}: DashboardPopulateProps) => {\n  const safeSpeed = Math.max(0.01, speed);\n  const durationMs = (durationInFrames / fps) * 1000;\n  const frameMs = 1000 / fps;\n  const structureEndMs = STRUCTURE_END * frameMs;\n  const kpiMs = ((60 / fps) * 1000) / safeSpeed;\n  const barStaggerMs = ((4 / fps) * 1000) / safeSpeed;\n  const lineMs = ((50 / fps) * 1000) / safeSpeed;\n\n  const containerStyle: CSSProperties = {\n    background: \"#09090b\",\n    color: \"white\",\n    display: \"flex\",\n    flexDirection: \"column\",\n    fontFamily: FONT_FAMILY,\n    gap: 24,\n    height,\n    overflow: \"hidden\",\n    padding: 64,\n    position: \"relative\",\n    width,\n  };\n\n  const linePath = buildLinePath();\n  const donutR = 70;\n  const donutCircum = 2 * Math.PI * donutR;\n\n  return (\n    <Timegroup\n      className={className}\n      duration={`${durationMs}ms`}\n      mode=\"fixed\"\n      style={containerStyle}\n    >\n      <>\n        <style>{`\n          @keyframes framecn-dashboard-structure {\n            from { opacity: 0; }\n            to { opacity: 1; }\n          }\n          @keyframes framecn-dashboard-kpi {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n          }\n          @keyframes framecn-dashboard-bar {\n            from { height: 0; }\n            to { height: var(--bar-h); }\n          }\n          @keyframes framecn-dashboard-line {\n            from { stroke-dashoffset: 1; }\n            to { stroke-dashoffset: 0; }\n          }\n          @keyframes framecn-dashboard-donut {\n            from { stroke-dashoffset: ${donutCircum}; }\n            to { stroke-dashoffset: ${donutCircum * 0.28}; }\n          }\n        `}</style>\n\n        {/* Subtle grid bg */}\n        <div\n          style={{\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            inset: 0,\n            position: \"absolute\",\n          }}\n        />\n\n        {/* Header */}\n        <div\n          style={{\n            alignItems: \"center\",\n            animation: `framecn-dashboard-structure ${structureEndMs}ms ease-out backwards`,\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            position: \"relative\",\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                marginTop: 4,\n                opacity: 0.5,\n              }}\n            >\n              Last 30 days\n            </div>\n          </div>\n          <div\n            style={{\n              display: \"flex\",\n              fontFamily: MONO_FAMILY,\n              fontSize: 12,\n              gap: 8,\n            }}\n          >\n            {[\"1D\", \"7D\", \"30D\", \"ALL\"].map((l, i) => (\n              <div\n                key={l}\n                style={{\n                  background:\n                    i === 2\n                      ? \"rgba(255,255,255,0.1)\"\n                      : \"rgba(255,255,255,0.03)\",\n                  border: \"1px solid rgba(255,255,255,0.06)\",\n                  borderRadius: 8,\n                  padding: \"6px 12px\",\n                }}\n              >\n                {l}\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Grid */}\n        <div\n          style={{\n            display: \"grid\",\n            flex: 1,\n            gap: 24,\n            gridTemplateColumns: \"1fr 1fr\",\n            gridTemplateRows: \"1fr 1fr\",\n            position: \"relative\",\n          }}\n        >\n          {/* KPI */}\n          <Tile\n            title=\"Revenue\"\n            style={{\n              animation: `framecn-dashboard-structure ${structureEndMs}ms ease-out backwards`,\n            }}\n          >\n            <div\n              style={{\n                animation: `framecn-dashboard-kpi ${kpiMs}ms cubic-bezier(0.16, 1, 0.3, 1) ${structureEndMs}ms backwards`,\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: 12,\n                height: \"100%\",\n                justifyContent: \"center\",\n              }}\n            >\n              <div\n                style={{\n                  fontFamily: MONO_FAMILY,\n                  fontSize: 64,\n                  fontVariantNumeric: \"tabular-nums\",\n                  fontWeight: 700,\n                  letterSpacing: \"-0.04em\",\n                }}\n              >\n                ${formatNumber(kpiTarget)}\n              </div>\n              <div\n                style={{\n                  alignItems: \"center\",\n                  color: accentColor,\n                  display: \"flex\",\n                  fontSize: 14,\n                  gap: 8,\n                }}\n              >\n                <span style={{ fontWeight: 600 }}>+12.4%</span>\n                <span style={{ color: \"white\", opacity: 0.5 }}>\n                  vs last month\n                </span>\n              </div>\n            </div>\n          </Tile>\n\n          {/* Bar chart */}\n          <Tile\n            title=\"Sessions\"\n            style={{\n              animation: `framecn-dashboard-structure ${structureEndMs}ms ease-out backwards`,\n            }}\n          >\n            <svg\n              viewBox=\"0 0 200 100\"\n              preserveAspectRatio=\"none\"\n              style={{ height: \"100%\", width: \"100%\" }}\n            >\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;\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                    style={{\n                      animation: `framecn-dashboard-bar ${(barH / 90) * kpiMs}ms cubic-bezier(0.16, 1, 0.3, 1) ${structureEndMs + i * barStaggerMs}ms backwards`,\n                      transformBox: \"fill-box\",\n                      transformOrigin: `0 ${100 - y}px`,\n                    }}\n                  />\n                );\n              })}\n            </svg>\n          </Tile>\n\n          {/* Line chart */}\n          <Tile\n            title=\"Active users\"\n            style={{\n              animation: `framecn-dashboard-structure ${structureEndMs}ms ease-out backwards`,\n            }}\n          >\n            <svg\n              viewBox=\"0 0 100 100\"\n              preserveAspectRatio=\"none\"\n              style={{ height: \"100%\", width: \"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                style={{\n                  animation: `framecn-dashboard-line ${lineMs}ms cubic-bezier(0.16, 1, 0.3, 1) ${structureEndMs + barStaggerMs * 5}ms backwards`,\n                  strokeDasharray: 1,\n                }}\n              />\n            </svg>\n          </Tile>\n\n          {/* Donut */}\n          <Tile\n            title=\"Conversion\"\n            style={{\n              animation: `framecn-dashboard-structure ${structureEndMs}ms ease-out backwards`,\n            }}\n          >\n            <div\n              style={{\n                alignItems: \"center\",\n                display: \"flex\",\n                height: \"100%\",\n                justifyContent: \"center\",\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                  style={{\n                    animation: `framecn-dashboard-donut ${lineMs}ms cubic-bezier(0.16, 1, 0.3, 1) ${structureEndMs + barStaggerMs * 6}ms backwards`,\n                    strokeDasharray: donutCircum,\n                    transform: \"rotate(-90deg)\",\n                    transformOrigin: \"center\",\n                  }}\n                />\n              </svg>\n              <div\n                style={{\n                  fontFamily: MONO_FAMILY,\n                  fontSize: 36,\n                  fontVariantNumeric: \"tabular-nums\",\n                  fontWeight: 700,\n                  letterSpacing: \"-0.02em\",\n                  position: \"absolute\",\n                }}\n              >\n                72.0%\n              </div>\n            </div>\n          </Tile>\n        </div>\n      </>\n    </Timegroup>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/framecn/dashboard-populate.tsx"
    }
  ],
  "type": "registry:component"
}