50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T3016,"use client"; import { interpolate, useCurrentFrame, useVideoConfig } from "remotion"; export interface InfiniteBentoPanProps { panSpeed?: number; accentColor?: string; speed?: number; className?: string; } const FONT_FAMILY = "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif"; const SUPER_W = 3500; const SUPER_H = 2500; type CardKind = | "chart" | "counter" | "gradient" | "code" | "logo" | "stat" | "bars"; interface CardDef { x: number; y: number; w: number; h: number; kind: CardKind; hue: number; label?: string; } const CARDS: CardDef[] = [ { x: 80, y: 80, w: 480, h: 280, kind: "chart", hue: 220, label: "Revenue" }, { x: 600, y: 80, w: 280, h: 280, kind: "counter", hue: 280, label: "MRR" }, { x: 920, y: 80, w: 360, h: 180, kind: "gradient", hue: 200 }, { x: 1320, y: 80, w: 480, h: 280, kind: "code", hue: 0, label: "deploy.ts" }, { x: 1840, y: 80, w: 280, h: 280, kind: "logo", hue: 320 }, { x: 2160, y: 80, w: 380, h: 180, kind: "stat", hue: 160, label: "Uptime" }, { x: 2580, y: 80, w: 360, h: 280, kind: "bars", hue: 40, label: "Visits" }, { x: 920, y: 300, w: 360, h: 200, kind: "counter", hue: 180, label: "Users" }, { x: 2160, y: 300, w: 380, h: 200, kind: "chart", hue: 100, label: "Latency", }, { x: 80, y: 400, w: 280, h: 280, kind: "gradient", hue: 340 }, { x: 400, y: 400, w: 480, h: 280, kind: "code", hue: 0, label: "api.ts" }, { x: 1320, y: 420, w: 280, h: 280, kind: "stat", hue: 60, label: "P95" }, { x: 1640, y: 420, w: 380, h: 280, kind: "bars", hue: 260, label: "Builds" }, { x: 2580, y: 420, w: 360, h: 280, kind: "logo", hue: 200 }, { x: 80, y: 720, w: 480, h: 240, kind: "chart", hue: 290, label: "Errors" }, { x: 600, y: 720, w: 280, h: 240, kind: "stat", hue: 20, label: "RPS" }, { x: 920, y: 740, w: 380, h: 220, kind: "gradient", hue: 240 }, { x: 1320, y: 740, w: 360, h: 220, kind: "counter", hue: 140, label: "Active", }, { x: 1720, y: 740, w: 480, h: 240, kind: "code", hue: 0, label: "worker.ts" }, { x: 2240, y: 740, w: 360, h: 240, kind: "bars", hue: 320, label: "Queue" }, { x: 80, y: 1000, w: 360, h: 220, kind: "logo", hue: 180 }, { x: 460, y: 1000, w: 380, h: 220, kind: "stat", hue: 80, label: "Cache" }, { x: 880, y: 1000, w: 480, h: 220, kind: "chart", hue: 200, label: "CPU" }, { x: 1400, y: 1000, w: 280, h: 220, kind: "counter", hue: 360, label: "Jobs", }, { x: 1720, y: 1020, w: 360, h: 220, kind: "gradient", hue: 120 }, { x: 2120, y: 1020, w: 380, h: 220, kind: "code", hue: 0, label: "db.sql" }, { x: 2540, y: 1020, w: 400, h: 220, kind: "bars", hue: 280, label: "Tasks" }, { x: 80, y: 1280, w: 480, h: 260, kind: "code", hue: 0, label: "edge.ts" }, { x: 600, y: 1280, w: 360, h: 260, kind: "chart", hue: 240, label: "TTFB" }, { x: 1000, y: 1280, w: 280, h: 260, kind: "logo", hue: 60 }, { x: 1320, y: 1280, w: 380, h: 260, kind: "stat", hue: 200, label: "Hits" }, { x: 1740, y: 1280, w: 360, h: 260, kind: "counter", hue: 300, label: "Bytes", }, { x: 2140, y: 1280, w: 380, h: 260, kind: "gradient", hue: 160 }, { x: 2560, y: 1280, w: 380, h: 260, kind: "bars", hue: 0, label: "Errors" }, { x: 80, y: 1600, w: 380, h: 220, kind: "stat", hue: 280, label: "Saved" }, { x: 500, y: 1600, w: 480, h: 220, kind: "chart", hue: 40, label: "Net Out" }, { x: 1020, y: 1600, w: 360, h: 220, kind: "code", hue: 0, label: "auth.ts" }, { x: 1420, y: 1600, w: 280, h: 220, kind: "logo", hue: 220 }, { x: 1740, y: 1620, w: 380, h: 220, kind: "counter", hue: 100, label: "Hooks", }, { x: 2160, y: 1620, w: 360, h: 220, kind: "bars", hue: 340, label: "Runs" }, { x: 2560, y: 1620, w: 380, h: 220, kind: "gradient", hue: 200 }, { x: 80, y: 1880, w: 480, h: 240, kind: "bars", hue: 180, label: "Edges" }, { x: 600, y: 1880, w: 380, h: 240, kind: "gradient", hue: 320 }, { x: 1020, y: 1880, w: 360, h: 240, kind: "logo", hue: 80 }, { x: 1420, y: 1880, w: 480, h: 240, kind: "chart", hue: 260, label: "Tokens", }, { x: 1940, y: 1880, w: 280, h: 240, kind: "counter", hue: 20, label: "Calls", }, { x: 2260, y: 1880, w: 380, h: 240, kind: "stat", hue: 140, label: "Score" }, { x: 2680, y: 1880, w: 260, h: 240, kind: "code", hue: 0, label: "ws.ts" }, ]; function noise(i: number, frame: number) { return Math.sin(frame / 30 + i) * 0.5 + 0.5; } function ChartCard({ accent, t }: { accent: string; t: number }) { const points: string[] = []; for (let i = 0; i < 12; i++) { const x = (i / 11) * 100; const y = 50 - (Math.sin(i * 0.7 + t) * 18 + Math.cos(i * 0.4 + t * 0.6) * 8); points.push(`${x},${y}`); } return ( ); } function BarsCard({ accent, t }: { accent: string; t: number }) { return (

{Array.from({ length: 10 }).map((_, i) => { const h = 25 + (Math.sin(i * 0.8 + t) * 0.5 + 0.5) * 70; return (

); })}

); } function CodeCard() { const lines = [ { indent: 0, w: 60, c: "#7dd3fc" }, { indent: 1, w: 80, c: "rgba(255,255,255,0.8)" }, { indent: 1, w: 50, c: "#f9a8d4" }, { indent: 2, w: 70, c: "rgba(255,255,255,0.8)" }, { indent: 2, w: 40, c: "#fde047" }, { indent: 1, w: 30, c: "rgba(255,255,255,0.6)" }, { indent: 0, w: 20, c: "rgba(255,255,255,0.6)" }, ]; return (

{lines.map((l, i) => (

))}

); } function LogoCard({ accent, hue }: { accent: string; hue: number }) { return (

); } function GradientCard({ hue }: { hue: number }) { return (

); } function Card({ card, accent, index, frame, }: { card: CardDef; accent: string; index: number; frame: number; }) { const t = noise(index, frame) * 6.28; const baseStyle: React.CSSProperties = { position: "absolute", left: card.x, top: card.y, width: card.w, height: card.h, borderRadius: 18, background: "linear-gradient(180deg, #131313 0%, #0a0a0a 100%)", border: "1px solid rgba(255,255,255,0.07)", overflow: "hidden", padding: 18, color: "white", display: "flex", flexDirection: "column", }; const labelEl = card.label ? (

{card.label}

) : null; if (card.kind === "chart") { return (

{labelEl}

); } if (card.kind === "bars") { return (

{labelEl}

); } if (card.kind === "counter") { const v = Math.floor(1200 + noise(index, frame) * 800); return (

{labelEl}

{v.toLocaleString()}

+{(noise(index + 1, frame) * 12).toFixed(1)}%

); } if (card.kind === "stat") { const v = (95 + noise(index, frame) * 5).toFixed(2); return (

{labelEl}

{v} %

); } if (card.kind === "code") { return (

{labelEl}

); } if (card.kind === "logo") { return (

); } // gradient return (

); } export function InfiniteBentoPan({ panSpeed = 1, accentColor = "#7c3aed", speed = 1, className, }: InfiniteBentoPanProps) { const frame = useCurrentFrame() * speed; const { durationInFrames, width, height } = useVideoConfig(); const maxX = SUPER_W - width; const maxY = SUPER_H - height; // diagonal pan: from top-left toward bottom-right const t = interpolate(frame, [0, durationInFrames], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", }); const px = t * maxX * Math.min(1, panSpeed); const py = t * maxY * Math.min(1, panSpeed); return (

{CARDS.map((c, i) => ( ))}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","remotion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remotion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remotion"}]]}]}]]}],["$","$L50",null,{"namespace":"@remocn","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/remocn/infinite-bento-pan/index.tsx","content":"$52","type":"registry:component","target":"components/remocn/infinite-bento-pan.tsx"}],"className":"h-[70svh] min-h-80"}]]}]