{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "infinite-bento-pan",
  "title": "Infinite Bento Pan",
  "description": "A camera diagonally drifts across an oversized bento grid behind a soft vignette.",
  "dependencies": [
    "remotion"
  ],
  "files": [
    {
      "path": "registry/remocn/infinite-bento-pan/index.tsx",
      "content": "\"use client\";\n\nimport { interpolate, useCurrentFrame, useVideoConfig } from \"remotion\";\n\nexport interface InfiniteBentoPanProps {\n  panSpeed?: number;\n  accentColor?: string;\n  speed?: number;\n  className?: string;\n}\n\nconst FONT_FAMILY =\n  \"var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif\";\n\nconst SUPER_W = 3500;\nconst SUPER_H = 2500;\n\ntype CardKind =\n  | \"chart\"\n  | \"counter\"\n  | \"gradient\"\n  | \"code\"\n  | \"logo\"\n  | \"stat\"\n  | \"bars\";\n\ninterface CardDef {\n  x: number;\n  y: number;\n  w: number;\n  h: number;\n  kind: CardKind;\n  hue: number;\n  label?: string;\n}\n\nconst CARDS: CardDef[] = [\n  { x: 80, y: 80, w: 480, h: 280, kind: \"chart\", hue: 220, label: \"Revenue\" },\n  { x: 600, y: 80, w: 280, h: 280, kind: \"counter\", hue: 280, label: \"MRR\" },\n  { x: 920, y: 80, w: 360, h: 180, kind: \"gradient\", hue: 200 },\n  { x: 1320, y: 80, w: 480, h: 280, kind: \"code\", hue: 0, label: \"deploy.ts\" },\n  { x: 1840, y: 80, w: 280, h: 280, kind: \"logo\", hue: 320 },\n  { x: 2160, y: 80, w: 380, h: 180, kind: \"stat\", hue: 160, label: \"Uptime\" },\n  { x: 2580, y: 80, w: 360, h: 280, kind: \"bars\", hue: 40, label: \"Visits\" },\n  { x: 920, y: 300, w: 360, h: 200, kind: \"counter\", hue: 180, label: \"Users\" },\n  {\n    x: 2160,\n    y: 300,\n    w: 380,\n    h: 200,\n    kind: \"chart\",\n    hue: 100,\n    label: \"Latency\",\n  },\n  { x: 80, y: 400, w: 280, h: 280, kind: \"gradient\", hue: 340 },\n  { x: 400, y: 400, w: 480, h: 280, kind: \"code\", hue: 0, label: \"api.ts\" },\n  { x: 1320, y: 420, w: 280, h: 280, kind: \"stat\", hue: 60, label: \"P95\" },\n  { x: 1640, y: 420, w: 380, h: 280, kind: \"bars\", hue: 260, label: \"Builds\" },\n  { x: 2580, y: 420, w: 360, h: 280, kind: \"logo\", hue: 200 },\n  { x: 80, y: 720, w: 480, h: 240, kind: \"chart\", hue: 290, label: \"Errors\" },\n  { x: 600, y: 720, w: 280, h: 240, kind: \"stat\", hue: 20, label: \"RPS\" },\n  { x: 920, y: 740, w: 380, h: 220, kind: \"gradient\", hue: 240 },\n  {\n    x: 1320,\n    y: 740,\n    w: 360,\n    h: 220,\n    kind: \"counter\",\n    hue: 140,\n    label: \"Active\",\n  },\n  { x: 1720, y: 740, w: 480, h: 240, kind: \"code\", hue: 0, label: \"worker.ts\" },\n  { x: 2240, y: 740, w: 360, h: 240, kind: \"bars\", hue: 320, label: \"Queue\" },\n  { x: 80, y: 1000, w: 360, h: 220, kind: \"logo\", hue: 180 },\n  { x: 460, y: 1000, w: 380, h: 220, kind: \"stat\", hue: 80, label: \"Cache\" },\n  { x: 880, y: 1000, w: 480, h: 220, kind: \"chart\", hue: 200, label: \"CPU\" },\n  {\n    x: 1400,\n    y: 1000,\n    w: 280,\n    h: 220,\n    kind: \"counter\",\n    hue: 360,\n    label: \"Jobs\",\n  },\n  { x: 1720, y: 1020, w: 360, h: 220, kind: \"gradient\", hue: 120 },\n  { x: 2120, y: 1020, w: 380, h: 220, kind: \"code\", hue: 0, label: \"db.sql\" },\n  { x: 2540, y: 1020, w: 400, h: 220, kind: \"bars\", hue: 280, label: \"Tasks\" },\n  { x: 80, y: 1280, w: 480, h: 260, kind: \"code\", hue: 0, label: \"edge.ts\" },\n  { x: 600, y: 1280, w: 360, h: 260, kind: \"chart\", hue: 240, label: \"TTFB\" },\n  { x: 1000, y: 1280, w: 280, h: 260, kind: \"logo\", hue: 60 },\n  { x: 1320, y: 1280, w: 380, h: 260, kind: \"stat\", hue: 200, label: \"Hits\" },\n  {\n    x: 1740,\n    y: 1280,\n    w: 360,\n    h: 260,\n    kind: \"counter\",\n    hue: 300,\n    label: \"Bytes\",\n  },\n  { x: 2140, y: 1280, w: 380, h: 260, kind: \"gradient\", hue: 160 },\n  { x: 2560, y: 1280, w: 380, h: 260, kind: \"bars\", hue: 0, label: \"Errors\" },\n  { x: 80, y: 1600, w: 380, h: 220, kind: \"stat\", hue: 280, label: \"Saved\" },\n  { x: 500, y: 1600, w: 480, h: 220, kind: \"chart\", hue: 40, label: \"Net Out\" },\n  { x: 1020, y: 1600, w: 360, h: 220, kind: \"code\", hue: 0, label: \"auth.ts\" },\n  { x: 1420, y: 1600, w: 280, h: 220, kind: \"logo\", hue: 220 },\n  {\n    x: 1740,\n    y: 1620,\n    w: 380,\n    h: 220,\n    kind: \"counter\",\n    hue: 100,\n    label: \"Hooks\",\n  },\n  { x: 2160, y: 1620, w: 360, h: 220, kind: \"bars\", hue: 340, label: \"Runs\" },\n  { x: 2560, y: 1620, w: 380, h: 220, kind: \"gradient\", hue: 200 },\n  { x: 80, y: 1880, w: 480, h: 240, kind: \"bars\", hue: 180, label: \"Edges\" },\n  { x: 600, y: 1880, w: 380, h: 240, kind: \"gradient\", hue: 320 },\n  { x: 1020, y: 1880, w: 360, h: 240, kind: \"logo\", hue: 80 },\n  {\n    x: 1420,\n    y: 1880,\n    w: 480,\n    h: 240,\n    kind: \"chart\",\n    hue: 260,\n    label: \"Tokens\",\n  },\n  {\n    x: 1940,\n    y: 1880,\n    w: 280,\n    h: 240,\n    kind: \"counter\",\n    hue: 20,\n    label: \"Calls\",\n  },\n  { x: 2260, y: 1880, w: 380, h: 240, kind: \"stat\", hue: 140, label: \"Score\" },\n  { x: 2680, y: 1880, w: 260, h: 240, kind: \"code\", hue: 0, label: \"ws.ts\" },\n];\n\nfunction noise(i: number, frame: number) {\n  return Math.sin(frame / 30 + i) * 0.5 + 0.5;\n}\n\nfunction ChartCard({ accent, t }: { accent: string; t: number }) {\n  const points: string[] = [];\n  for (let i = 0; i < 12; i++) {\n    const x = (i / 11) * 100;\n    const y =\n      50 - (Math.sin(i * 0.7 + t) * 18 + Math.cos(i * 0.4 + t * 0.6) * 8);\n    points.push(`${x},${y}`);\n  }\n  return (\n    <svg\n      viewBox=\"0 0 100 60\"\n      preserveAspectRatio=\"none\"\n      style={{ width: \"100%\", height: \"100%\" }}\n    >\n      <polyline\n        points={points.join(\" \")}\n        fill=\"none\"\n        stroke={accent}\n        strokeWidth={1.4}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n      <polyline\n        points={`${points.join(\" \")} 100,60 0,60`}\n        fill={`${accent}22`}\n        stroke=\"none\"\n      />\n    </svg>\n  );\n}\n\nfunction BarsCard({ accent, t }: { accent: string; t: number }) {\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        alignItems: \"flex-end\",\n        gap: 6,\n        height: \"100%\",\n        width: \"100%\",\n      }}\n    >\n      {Array.from({ length: 10 }).map((_, i) => {\n        const h = 25 + (Math.sin(i * 0.8 + t) * 0.5 + 0.5) * 70;\n        return (\n          <div\n            key={i}\n            style={{\n              flex: 1,\n              height: `${h}%`,\n              background: `linear-gradient(180deg, ${accent} 0%, ${accent}55 100%)`,\n              borderRadius: 4,\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nfunction CodeCard() {\n  const lines = [\n    { indent: 0, w: 60, c: \"#7dd3fc\" },\n    { indent: 1, w: 80, c: \"rgba(255,255,255,0.8)\" },\n    { indent: 1, w: 50, c: \"#f9a8d4\" },\n    { indent: 2, w: 70, c: \"rgba(255,255,255,0.8)\" },\n    { indent: 2, w: 40, c: \"#fde047\" },\n    { indent: 1, w: 30, c: \"rgba(255,255,255,0.6)\" },\n    { indent: 0, w: 20, c: \"rgba(255,255,255,0.6)\" },\n  ];\n  return (\n    <div\n      style={{\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: 8,\n        fontFamily: \"ui-monospace, SFMono-Regular, Menlo, monospace\",\n      }}\n    >\n      {lines.map((l, i) => (\n        <div\n          key={i}\n          style={{\n            marginLeft: l.indent * 14,\n            width: `${l.w}%`,\n            height: 8,\n            borderRadius: 3,\n            background: l.c,\n            opacity: 0.7,\n          }}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction LogoCard({ accent, hue }: { accent: string; hue: number }) {\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n      }}\n    >\n      <div\n        style={{\n          width: 80,\n          height: 80,\n          borderRadius: 20,\n          background: `linear-gradient(135deg, ${accent} 0%, hsl(${hue},70%,55%) 100%)`,\n          boxShadow: `0 10px 30px ${accent}44`,\n        }}\n      />\n    </div>\n  );\n}\n\nfunction GradientCard({ hue }: { hue: number }) {\n  return (\n    <div\n      style={{\n        width: \"100%\",\n        height: \"100%\",\n        background: `radial-gradient(circle at 30% 30%, hsl(${hue},80%,60%) 0%, hsl(${(hue + 60) % 360},70%,40%) 50%, #0a0a0a 100%)`,\n      }}\n    />\n  );\n}\n\nfunction Card({\n  card,\n  accent,\n  index,\n  frame,\n}: {\n  card: CardDef;\n  accent: string;\n  index: number;\n  frame: number;\n}) {\n  const t = noise(index, frame) * 6.28;\n  const baseStyle: React.CSSProperties = {\n    position: \"absolute\",\n    left: card.x,\n    top: card.y,\n    width: card.w,\n    height: card.h,\n    borderRadius: 18,\n    background: \"linear-gradient(180deg, #131313 0%, #0a0a0a 100%)\",\n    border: \"1px solid rgba(255,255,255,0.07)\",\n    overflow: \"hidden\",\n    padding: 18,\n    color: \"white\",\n    display: \"flex\",\n    flexDirection: \"column\",\n  };\n\n  const labelEl = card.label ? (\n    <div\n      style={{\n        fontSize: 12,\n        fontWeight: 600,\n        color: \"rgba(255,255,255,0.55)\",\n        letterSpacing: \"0.04em\",\n        textTransform: \"uppercase\",\n        marginBottom: 8,\n      }}\n    >\n      {card.label}\n    </div>\n  ) : null;\n\n  if (card.kind === \"chart\") {\n    return (\n      <div style={baseStyle}>\n        {labelEl}\n        <div style={{ flex: 1 }}>\n          <ChartCard accent={accent} t={t} />\n        </div>\n      </div>\n    );\n  }\n  if (card.kind === \"bars\") {\n    return (\n      <div style={baseStyle}>\n        {labelEl}\n        <div style={{ flex: 1 }}>\n          <BarsCard accent={accent} t={t} />\n        </div>\n      </div>\n    );\n  }\n  if (card.kind === \"counter\") {\n    const v = Math.floor(1200 + noise(index, frame) * 800);\n    return (\n      <div style={baseStyle}>\n        {labelEl}\n        <div\n          style={{\n            flex: 1,\n            display: \"flex\",\n            alignItems: \"center\",\n            justifyContent: \"flex-start\",\n            fontSize: 56,\n            fontWeight: 700,\n            letterSpacing: \"-0.04em\",\n            color: \"white\",\n          }}\n        >\n          {v.toLocaleString()}\n        </div>\n        <div style={{ fontSize: 12, color: accent, fontWeight: 600 }}>\n          +{(noise(index + 1, frame) * 12).toFixed(1)}%\n        </div>\n      </div>\n    );\n  }\n  if (card.kind === \"stat\") {\n    const v = (95 + noise(index, frame) * 5).toFixed(2);\n    return (\n      <div style={baseStyle}>\n        {labelEl}\n        <div\n          style={{\n            flex: 1,\n            display: \"flex\",\n            alignItems: \"center\",\n            fontSize: 48,\n            fontWeight: 700,\n            letterSpacing: \"-0.03em\",\n          }}\n        >\n          {v}\n          <span\n            style={{\n              fontSize: 20,\n              color: \"rgba(255,255,255,0.5)\",\n              marginLeft: 4,\n            }}\n          >\n            %\n          </span>\n        </div>\n      </div>\n    );\n  }\n  if (card.kind === \"code\") {\n    return (\n      <div style={baseStyle}>\n        {labelEl}\n        <div style={{ flex: 1, display: \"flex\", alignItems: \"center\" }}>\n          <div style={{ width: \"100%\" }}>\n            <CodeCard />\n          </div>\n        </div>\n      </div>\n    );\n  }\n  if (card.kind === \"logo\") {\n    return (\n      <div style={{ ...baseStyle, padding: 0 }}>\n        <LogoCard accent={accent} hue={card.hue} />\n      </div>\n    );\n  }\n  // gradient\n  return (\n    <div style={{ ...baseStyle, padding: 0 }}>\n      <GradientCard hue={card.hue} />\n    </div>\n  );\n}\n\nexport function InfiniteBentoPan({\n  panSpeed = 1,\n  accentColor = \"#7c3aed\",\n  speed = 1,\n  className,\n}: InfiniteBentoPanProps) {\n  const frame = useCurrentFrame() * speed;\n  const { durationInFrames, width, height } = useVideoConfig();\n\n  const maxX = SUPER_W - width;\n  const maxY = SUPER_H - height;\n\n  // diagonal pan: from top-left toward bottom-right\n  const t = interpolate(frame, [0, durationInFrames], [0, 1], {\n    extrapolateLeft: \"clamp\",\n    extrapolateRight: \"clamp\",\n  });\n\n  const px = t * maxX * Math.min(1, panSpeed);\n  const py = t * maxY * Math.min(1, panSpeed);\n\n  return (\n    <div\n      className={className}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        background: \"#050505\",\n        overflow: \"hidden\",\n        fontFamily: FONT_FAMILY,\n      }}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          left: 0,\n          top: 0,\n          width: SUPER_W,\n          height: SUPER_H,\n          transform: `translate(${-px}px, ${-py}px)`,\n          willChange: \"transform\",\n        }}\n      >\n        {CARDS.map((c, i) => (\n          <Card key={i} card={c} accent={accentColor} index={i} frame={frame} />\n        ))}\n      </div>\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background:\n            \"radial-gradient(circle at center, transparent 30%, rgba(0,0,0,0.85) 80%, #000 100%)\",\n          pointerEvents: \"none\",\n        }}\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/remocn/infinite-bento-pan.tsx"
    }
  ],
  "type": "registry:component"
}