{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tabs-illustration-vercel", "type": "registry:ui", "description": "Tabs with Vercel-style illustrations", "files": [ { "path": "registry/default/ui/tabs-illustration-vercel.tsx", "content": "\"use client\"\n\nimport {\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n type ReactNode,\n} from \"react\"\n\ntype Feature = {\n id: string\n title: string\n description: string\n badge?: string\n}\n\nconst FEATURES: Feature[] = [\n {\n id: \"text\",\n title: \"Text\",\n description:\n \"Access the latest from every major model lab and provider. Power your AI features all through a single endpoint.\",\n },\n {\n id: \"image\",\n title: \"Image\",\n description:\n \"Generate and edit with best-in-class image models, no extra setup.\",\n },\n {\n id: \"video\",\n title: \"Video\",\n description:\n \"Ship production-ready video across a wide range of models with just a prompt.\",\n badge: \"New\",\n },\n]\n\nconst TRAIL_CONFIGS = [\n { color: \"#EBE51A\", dur: 6.5 },\n { color: \"#A4E600\", dur: 4.1 },\n { color: \"#2DDD69\", dur: 5.7 },\n { color: \"#FF904D\", dur: 5.7 },\n { color: \"#62DE00\", dur: 4.9 },\n { color: \"#FFBB3D\", dur: 4.9 },\n { color: \"#F8E52C\", dur: 5.7 },\n]\n\nconst TRAIL_PATHS = [\n {\n d: \"M617.415,100 h-61.743M555.673,100 h-74.252M506.605,200 A 123.097 400 0 0 0 481.421 100M506.605,200 h-106.605M400,200 h-106.605\",\n cx: \"617.415;617.415;555.673;481.421;506.605;400;293.395;293.395;0\",\n cy: \"100;100;100;100;200;200;200;200;0\",\n r: \"0;50;50;50;50;50;50;0;0\",\n kt: \"0;0.088;0.176;0.264;0.352;0.44;0.527;0.615;1\",\n op: \"0;1;1;1;1;1;1;0;0\",\n },\n {\n d: \"M603.824,200 h-97.219M519.188,300 A 123.097 400 0 0 0 506.605 200\",\n cx: \"603.824;603.824;506.605;519.188;519.188;0\",\n cy: \"200;200;200;300;300;0\",\n r: \"0;50;50;50;0;0\",\n kt: \"0;0.098;0.195;0.293;0.39;1\",\n op: \"0;1;1;1;0;0\",\n },\n {\n d: \"M718.264,300 h-90.382M627.882,300 A 235.355 400 0 0 0 603.824 200M603.824,200 h-97.219M506.605,200 h-106.605\",\n cx: \"718.264;718.264;627.882;603.824;506.605;400;400;0\",\n cy: \"300;300;300;200;200;200;200;0\",\n r: \"0;50;50;50;50;50;0;0\",\n kt: \"0;0.094;0.187;0.281;0.374;0.468;0.561;1\",\n op: \"0;1;1;1;1;1;0;0\",\n },\n {\n d: \"M627.882,300 h-108.694M519.188,300 h-119.188M400,300 h-119.188M280.812,300 A -123.097 400 0 0 0 276.903 400\",\n cx: \"627.882;627.882;519.188;400;280.812;276.903;276.903;0\",\n cy: \"300;300;300;300;300;400;400;0\",\n r: \"0;50;50;50;50;50;0;0\",\n kt: \"0;0.094;0.187;0.281;0.374;0.468;0.561;1\",\n op: \"0;1;1;1;1;1;0;0\",\n },\n {\n d: \"M318.579,100 h-74.252M244.327,100 h-61.743M182.585,100 A -328.701 400 0 0 0 115.336 200\",\n cx: \"318.579;318.579;244.327;182.585;115.336;115.336;0\",\n cy: \"100;100;100;100;200;200;0\",\n r: \"0;50;50;50;50;0;0\",\n kt: \"0;0.098;0.196;0.294;0.392;0.49;1\",\n op: \"0;1;1;1;1;0;0\",\n },\n {\n d: \"M196.176,200 h-80.84M115.336,200 h-61.747M53.59,200 A -400 400 0 0 0 12.702 300\",\n cx: \"196.176;196.176;115.336;53.59;12.702;12.702;0\",\n cy: \"200;200;200;200;300;300;0\",\n r: \"0;50;50;50;50;0;0\",\n kt: \"0;0.098;0.196;0.294;0.392;0.49;1\",\n op: \"0;1;1;1;1;0;0\",\n },\n {\n d: \"M280.812,300 h-108.694M172.118,300 h-90.382M81.736,300 h-69.035M12.702,300 A -400 400 0 0 0 0 400\",\n cx: \"280.812;280.812;172.118;81.736;12.702;0;0;0\",\n cy: \"300;300;300;300;300;400;400;0\",\n r: \"0;50;50;50;50;50;0;0\",\n kt: \"0;0.094;0.187;0.281;0.374;0.468;0.561;1\",\n op: \"0;1;1;1;1;1;0;0\",\n },\n]\n\n/* ─── Icons ─── */\nfunction XIcon({ size = 16 }) {\n return (\n \n X Icon\n \n \n )\n}\n\nfunction OpenAIIcon({ size = 16 }) {\n return (\n \n OpenAI Icon\n \n \n )\n}\n\nfunction PlayIcon({ size = 16 }) {\n return (\n \n Play Icon\n \n \n )\n}\n\n/* ─── Chat bubble tail ─── */\nfunction BubbleTail() {\n const tailMaskId = `tail-mask-${useId().replace(/:/g, \"\")}`\n\n return (\n \n Bubble Tail\n {/* No full-rect fill: avoids a second “page color” that can mismatch the real parent behind the tail. */}\n \n \n \n \n \n \n \n \n )\n}\n\n/* ─── Globe wireframe with SMIL animations ─── */\nfunction GlobeWireframe() {\n const idPrefix = useId().replace(/:/g, \"\")\n const ggId = `${idPrefix}-gg`\n const gmgId = `${idPrefix}-gmg`\n const gmId = `${idPrefix}-gm`\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {[\n -400, -328.701, -235.355, -123.097, 0, 123.097, 235.355, 328.701, 400,\n ].map((a) => (\n \n ))}\n {[\n [135.425, 100, 529.15],\n [53.59, 200, 692.82],\n [12.702, 300, 774.597],\n [0, 400, 800],\n [12.702, 500, 774.597],\n [53.59, 600, 692.82],\n [135.425, 700, 529.15],\n ].map(([x, y, w]) => (\n \n ))}\n \n {TRAIL_CONFIGS.map((t, i) => {\n const p = TRAIL_PATHS[i]\n if (!p) return null\n const id = `t${i}`,\n dur = `${t.dur}s`\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n })}\n \n )\n}\n\n/* ─── Shared chat bubble shell ─── */\nfunction ChatBubbleShell({\n icon,\n children,\n}: {\n icon: ReactNode\n children: ReactNode\n}) {\n return (\n \n \n {icon}\n \n
\n \n {children}\n
\n \n \n \n )\n}\n\n/* ─── Tab: Text ─── streaming text with cursor ─── */\nfunction TextPanel() {\n const text =\n \"Vercel is a cloud platform for deploying and hosting websites, apps, and serverless functions with speed, scalability, and simplicity. It gives teams one workflow from development to global delivery, so products ship faster while keeping reliability and performance high across every request. With robust developer tooling and seamless integrations, Vercel enables engineering teams to collaborate efficiently and manage code from preview to production.\"\n const [charCount, setCharCount] = useState(0)\n const intervalRef = useRef | null>(null)\n\n useEffect(() => {\n setCharCount(0)\n intervalRef.current = setInterval(() => {\n setCharCount((c) => {\n if (c >= text.length) {\n if (intervalRef.current) {\n clearInterval(intervalRef.current)\n }\n return c\n }\n return c + 2\n })\n }, 16)\n return () => {\n if (intervalRef.current) {\n clearInterval(intervalRef.current)\n }\n }\n }, [])\n\n return (\n }>\n \n \n \n {text.slice(0, charCount)}\n {charCount < text.length && (\n \n )}\n

\n \n \n \n )\n}\n\n/* ─── Tab: Image ─── globe wireframe with progress ─── */\nfunction ImagePanel() {\n const [progress, setProgress] = useState(0)\n useEffect(() => {\n setProgress(0)\n const start = Date.now()\n const dur = 8000\n let raf: number | null = null\n function tick() {\n const e = Date.now() - start\n setProgress(Math.min((e / dur) * 100, 100))\n if (e < dur) raf = requestAnimationFrame(tick)\n }\n raf = requestAnimationFrame(tick)\n return () => {\n if (raf !== null) {\n cancelAnimationFrame(raf)\n }\n }\n }, [])\n\n return (\n }>\n \n \n \n
\n \n \n
\n \n \n )\n}\n\n/* ─── Tab: Video ─── waveform visualizer with timeline ─── */\nfunction VideoPanel() {\n const [time, setTime] = useState(0)\n const rafRef = useRef(null)\n\n useEffect(() => {\n setTime(0)\n const start = Date.now()\n function tick() {\n setTime(((Date.now() - start) / 1000) % 12)\n rafRef.current = requestAnimationFrame(tick)\n }\n rafRef.current = requestAnimationFrame(tick)\n return () => {\n if (rafRef.current !== null) {\n cancelAnimationFrame(rafRef.current)\n }\n }\n }, [])\n\n const fmt = (s: number) =>\n `${Math.floor(s / 60)}:${Math.floor(s % 60)\n .toString()\n .padStart(2, \"0\")}`\n\n return (\n }>\n \n \n {Array.from({ length: 32 }, (_, index) => index + 1).map((bar) => {\n const phase = (time * 2.5 + (bar - 1) * 0.3) % (Math.PI * 2)\n const h = 10 + Math.abs(Math.sin(phase)) * 58\n const hue = ((bar - 1) * 11 + time * 30) % 360\n return (\n \n )\n })}\n \n \n \n {fmt(time)}\n \n \n \n \n \n 0:12\n \n \n \n \n )\n}\n\n/* ─── Tab button ─── */\nfunction TabButton({\n active,\n title,\n badge,\n progress,\n onClick,\n}: {\n active: boolean\n title: string\n badge?: string\n progress: number\n onClick: () => void\n}) {\n return (\n \n
\n \n {title}\n \n {badge && (\n \n {badge}\n \n )}\n
\n \n \n \n \n )\n}\n\nconst CYCLE_MS = 6000\n\n/* ─── Main export ─── */\nexport default function GenerateAnything({\n title = \"Generate anything\",\n features = FEATURES,\n}: {\n title?: string\n features?: Feature[]\n}) {\n const [activeTab, setActiveTab] = useState(\"text\")\n const [panelKey, setPanelKey] = useState(0)\n const [progress, setProgress] = useState(1)\n const startRef = useRef(Date.now())\n const rafRef = useRef(null)\n\n const advanceTab = useCallback(() => {\n setActiveTab((prev) => {\n const idx = features.findIndex((f) => f.id === prev)\n return features[(idx + 1) % features.length].id\n })\n setPanelKey((k) => k + 1)\n startRef.current = Date.now()\n }, [features])\n\n useEffect(() => {\n function tick() {\n const elapsed = Date.now() - startRef.current\n const remaining = Math.max(1 - elapsed / CYCLE_MS, 0)\n setProgress(remaining)\n if (remaining <= 0) {\n advanceTab()\n }\n rafRef.current = requestAnimationFrame(tick)\n }\n rafRef.current = requestAnimationFrame(tick)\n return () => {\n if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)\n }\n }, [advanceTab])\n\n const handleTabChange = useCallback(\n (id: string) => {\n if (id === activeTab) return\n setActiveTab(id)\n setPanelKey((k) => k + 1)\n startRef.current = Date.now()\n setProgress(1)\n },\n [activeTab]\n )\n\n return (\n <>\n \n \n {/* Left: tabs + description */}\n \n \n {title}\n \n
\n {features.map((f) => {\n const isActive = f.id === activeTab\n return (\n
\n handleTabChange(f.id)}\n progress={isActive ? progress : 0}\n title={f.title}\n />\n \n \n {f.description}\n

\n
\n
\n )\n })}\n \n \n\n {/* Divider */}\n \n\n {/* Right: animated panel */}\n \n \n {activeTab === \"text\" && }\n {activeTab === \"image\" && }\n {activeTab === \"video\" && }\n \n \n \n \n )\n}\n", "type": "registry:ui" } ] }