4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T30d5,"use client"; import { Timegroup } from "@editframe/react"; import type { CSSProperties } from "react"; 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[] = [ { h: 280, hue: 220, kind: "chart", label: "Revenue", w: 480, x: 80, y: 80 }, { h: 280, hue: 280, kind: "counter", label: "MRR", w: 280, x: 600, y: 80 }, { h: 180, hue: 200, kind: "gradient", w: 360, x: 920, y: 80 }, { h: 280, hue: 0, kind: "code", label: "deploy.ts", w: 480, x: 1320, y: 80 }, { h: 280, hue: 320, kind: "logo", w: 280, x: 1840, y: 80 }, { h: 180, hue: 160, kind: "stat", label: "Uptime", w: 380, x: 2160, y: 80 }, { h: 280, hue: 40, kind: "bars", label: "Visits", w: 360, x: 2580, y: 80 }, { h: 200, hue: 180, kind: "counter", label: "Users", w: 360, x: 920, y: 300 }, { h: 200, hue: 100, kind: "chart", label: "Latency", w: 380, x: 2160, y: 300, }, { h: 280, hue: 340, kind: "gradient", w: 280, x: 80, y: 400 }, { h: 280, hue: 0, kind: "code", label: "api.ts", w: 480, x: 400, y: 400 }, { h: 280, hue: 60, kind: "stat", label: "P95", w: 280, x: 1320, y: 420 }, { h: 280, hue: 260, kind: "bars", label: "Builds", w: 380, x: 1640, y: 420 }, { h: 280, hue: 200, kind: "logo", w: 360, x: 2580, y: 420 }, { h: 240, hue: 290, kind: "chart", label: "Errors", w: 480, x: 80, y: 720 }, { h: 240, hue: 20, kind: "stat", label: "RPS", w: 280, x: 600, y: 720 }, { h: 220, hue: 240, kind: "gradient", w: 380, x: 920, y: 740 }, { h: 220, hue: 140, kind: "counter", label: "Active", w: 360, x: 1320, y: 740, }, { h: 220, hue: 0, kind: "code", label: "worker.ts", w: 480, x: 1720, y: 740 }, { h: 220, hue: 320, kind: "bars", label: "Queue", w: 360, x: 2240, y: 740 }, { h: 220, hue: 180, kind: "logo", w: 360, x: 80, y: 1000 }, { h: 220, hue: 80, kind: "stat", label: "Cache", w: 380, x: 460, y: 1000 }, { h: 220, hue: 200, kind: "chart", label: "CPU", w: 480, x: 880, y: 1000 }, { h: 220, hue: 360, kind: "counter", label: "Jobs", w: 280, x: 1400, y: 1000, }, { h: 220, hue: 120, kind: "gradient", w: 360, x: 1720, y: 1020 }, { h: 220, hue: 0, kind: "code", label: "db.sql", w: 380, x: 2120, y: 1020 }, { h: 220, hue: 280, kind: "bars", label: "Tasks", w: 400, x: 2540, y: 1020 }, { h: 260, hue: 0, kind: "code", label: "edge.ts", w: 480, x: 80, y: 1280 }, { h: 260, hue: 240, kind: "chart", label: "TTFB", w: 360, x: 600, y: 1280 }, { h: 260, hue: 60, kind: "logo", w: 280, x: 1000, y: 1280 }, { h: 260, hue: 200, kind: "stat", label: "Hits", w: 380, x: 1320, y: 1280 }, { h: 260, hue: 300, kind: "counter", label: "Bytes", w: 360, x: 1740, y: 1280, }, { h: 260, hue: 160, kind: "gradient", w: 380, x: 2140, y: 1280 }, { h: 260, hue: 0, kind: "bars", label: "Errors", w: 380, x: 2560, y: 1280 }, { h: 220, hue: 280, kind: "stat", label: "Saved", w: 380, x: 80, y: 1600 }, { h: 220, hue: 40, kind: "chart", label: "Net Out", w: 480, x: 500, y: 1600 }, { h: 220, hue: 0, kind: "code", label: "auth.ts", w: 360, x: 1020, y: 1600 }, { h: 220, hue: 220, kind: "logo", w: 280, x: 1420, y: 1600 }, { h: 220, hue: 100, kind: "counter", label: "Hooks", w: 380, x: 1740, y: 1620, }, { h: 220, hue: 340, kind: "bars", label: "Runs", w: 360, x: 2160, y: 1620 }, { h: 220, hue: 200, kind: "gradient", w: 380, x: 2560, y: 1620 }, { h: 240, hue: 180, kind: "bars", label: "Edges", w: 480, x: 80, y: 1880 }, { h: 240, hue: 320, kind: "gradient", w: 380, x: 600, y: 1880 }, { h: 240, hue: 80, kind: "logo", w: 360, x: 1020, y: 1880 }, { h: 240, hue: 260, kind: "chart", label: "Tokens", w: 480, x: 1420, y: 1880, }, { h: 240, hue: 20, kind: "counter", label: "Calls", w: 280, x: 1940, y: 1880, }, { h: 240, hue: 140, kind: "stat", label: "Score", w: 380, x: 2260, y: 1880 }, { h: 240, hue: 0, kind: "code", label: "ws.ts", w: 260, x: 2680, y: 1880 }, ]; const ChartCard = ({ accent, t }: { accent: string; t: number }) => { const points: string[] = []; for (let i = 0; i < 12; i += 1) { 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 ( ); }; const BarsCard = ({ accent, t }: { accent: string; t: number }) => (

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

); })}

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

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

))}

); }; const LogoCard = ({ accent, hue }: { accent: string; hue: number }) => (

); const GradientCard = ({ hue }: { hue: number }) => (

); const Card = ({ card, accent, index, frame, }: { card: CardDef; accent: string; index: number; frame: number; }) => { const t = (Math.sin(frame / 30 + index) * 0.5 + 0.5) * 6.28; const baseStyle: React.CSSProperties = { background: "linear-gradient(180deg, #131313 0%, #0a0a0a 100%)", border: "1px solid rgba(255,255,255,0.07)", borderRadius: 18, color: "white", display: "flex", flexDirection: "column", height: card.h, left: card.x, overflow: "hidden", padding: 18, position: "absolute", top: card.y, width: card.w, }; 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 + Math.sin(index + frame / 30) * 800); return (

{labelEl}

{v.toLocaleString()}

+{(Math.sin(index + 1 + frame / 30) * 12).toFixed(1)}%

); } if (card.kind === "stat") { const v = (95 + Math.sin(index + frame / 30) * 5).toFixed(2); return (

{labelEl}

{v} %

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

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

); } // gradient return (

); }; export interface InfiniteBentoPanProps { panSpeed?: number; accentColor?: string; speed?: number; fps?: number; durationInFrames?: number; width?: number; height?: number; className?: string; } export const InfiniteBentoPan = ({ panSpeed = 1, accentColor = "#7c3aed", speed = 1, fps = 30, durationInFrames = 300, width = 1280, height = 720, className, }: InfiniteBentoPanProps) => { const safeSpeed = Math.max(0.01, speed); const panRate = Math.max(0.01, panSpeed); const durationMs = (durationInFrames / fps) * 1000; const maxX = SUPER_W - width; const maxY = SUPER_H - height; const containerStyle: CSSProperties = { background: "#050505", fontFamily: FONT_FAMILY, height, overflow: "hidden", position: "relative", width, }; return ( <>

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

); }; 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","remotion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/remotion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"remotion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://framecn.vercel.app/r/infinite-bento-pan.json","proxyUrl":"https://shadcnregistry.com/r/framecn/infinite-bento-pan","itemId":"@framecn/infinite-bento-pan"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/bases/editframe/components/infinite-bento-pan/index.tsx","content":"$52","type":"registry:component","target":"components/framecn/infinite-bento-pan.tsx"}]}]]}],"$L53"]}]

Infinite Bento Pan

Installation

Files

components

Styles