# Tabs Illustration Vercel > Auto-advancing feature tabs for React and shadcn/ui with Vercel-style animated illustrations and a progress indicator. Source: https://www.cult-ui.com/docs/components/tabs-illustration-vercel ## Example ```tsx title="tabs-illustration-vercel-demo.tsx" "use client" import GenerateAnything from "@/components/ui/tabs-illustration-vercel" function TabsIllustrationVercelDemo() { return (
) } export default TabsIllustrationVercelDemo ``` Tabs Illustration Vercel is a React tabs component for shadcn/ui. Use it on AI product landing pages or feature sections that showcase several capabilities. ## Installation ### CLI ```bash npx shadcn@latest add @cult-ui/tabs-illustration-vercel ``` ### Manual **Copy and paste the following code into your project.** ```tsx title="tabs-illustration-vercel.tsx" "use client" import { useCallback, useEffect, useId, useRef, useState, type ReactNode, } from "react" type Feature = { id: string title: string description: string badge?: string } const FEATURES: Feature[] = [ { id: "text", title: "Text", description: "Access the latest from every major model lab and provider. Power your AI features all through a single endpoint.", }, { id: "image", title: "Image", description: "Generate and edit with best-in-class image models, no extra setup.", }, { id: "video", title: "Video", description: "Ship production-ready video across a wide range of models with just a prompt.", badge: "New", }, ] const TRAIL_CONFIGS = [ { color: "#EBE51A", dur: 6.5 }, { color: "#A4E600", dur: 4.1 }, { color: "#2DDD69", dur: 5.7 }, { color: "#FF904D", dur: 5.7 }, { color: "#62DE00", dur: 4.9 }, { color: "#FFBB3D", dur: 4.9 }, { color: "#F8E52C", dur: 5.7 }, ] const TRAIL_PATHS = [ { 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", cx: "617.415;617.415;555.673;481.421;506.605;400;293.395;293.395;0", cy: "100;100;100;100;200;200;200;200;0", r: "0;50;50;50;50;50;50;0;0", kt: "0;0.088;0.176;0.264;0.352;0.44;0.527;0.615;1", op: "0;1;1;1;1;1;1;0;0", }, { d: "M603.824,200 h-97.219M519.188,300 A 123.097 400 0 0 0 506.605 200", cx: "603.824;603.824;506.605;519.188;519.188;0", cy: "200;200;200;300;300;0", r: "0;50;50;50;0;0", kt: "0;0.098;0.195;0.293;0.39;1", op: "0;1;1;1;0;0", }, { 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", cx: "718.264;718.264;627.882;603.824;506.605;400;400;0", cy: "300;300;300;200;200;200;200;0", r: "0;50;50;50;50;50;0;0", kt: "0;0.094;0.187;0.281;0.374;0.468;0.561;1", op: "0;1;1;1;1;1;0;0", }, { 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", cx: "627.882;627.882;519.188;400;280.812;276.903;276.903;0", cy: "300;300;300;300;300;400;400;0", r: "0;50;50;50;50;50;0;0", kt: "0;0.094;0.187;0.281;0.374;0.468;0.561;1", op: "0;1;1;1;1;1;0;0", }, { d: "M318.579,100 h-74.252M244.327,100 h-61.743M182.585,100 A -328.701 400 0 0 0 115.336 200", cx: "318.579;318.579;244.327;182.585;115.336;115.336;0", cy: "100;100;100;100;200;200;0", r: "0;50;50;50;50;0;0", kt: "0;0.098;0.196;0.294;0.392;0.49;1", op: "0;1;1;1;1;0;0", }, { d: "M196.176,200 h-80.84M115.336,200 h-61.747M53.59,200 A -400 400 0 0 0 12.702 300", cx: "196.176;196.176;115.336;53.59;12.702;12.702;0", cy: "200;200;200;200;300;300;0", r: "0;50;50;50;50;0;0", kt: "0;0.098;0.196;0.294;0.392;0.49;1", op: "0;1;1;1;1;0;0", }, { 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", cx: "280.812;280.812;172.118;81.736;12.702;0;0;0", cy: "300;300;300;300;300;400;400;0", r: "0;50;50;50;50;50;0;0", kt: "0;0.094;0.187;0.281;0.374;0.468;0.561;1", op: "0;1;1;1;1;1;0;0", }, ] /* ─── Icons ─── */ function XIcon({ size = 16 }) { return ( X Icon ) } function OpenAIIcon({ size = 16 }) { return ( OpenAI Icon ) } function PlayIcon({ size = 16 }) { return ( Play Icon ) } /* ─── Chat bubble tail ─── */ function BubbleTail() { const tailMaskId = `tail-mask-${useId().replace(/:/g, "")}` return ( Bubble Tail {/* No full-rect fill: avoids a second “page color” that can mismatch the real parent behind the tail. */} ) } /* ─── Globe wireframe with SMIL animations ─── */ function GlobeWireframe() { const idPrefix = useId().replace(/:/g, "") const ggId = `${idPrefix}-gg` const gmgId = `${idPrefix}-gmg` const gmId = `${idPrefix}-gm` return ( ) } /* ─── Shared chat bubble shell ─── */ function ChatBubbleShell({ icon, children, }: { icon: ReactNode children: ReactNode }) { return (
{icon}
{children}
) } /* ─── Tab: Text ─── streaming text with cursor ─── */ function TextPanel() { const text = "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." const [charCount, setCharCount] = useState(0) const intervalRef = useRef | null>(null) useEffect(() => { setCharCount(0) intervalRef.current = setInterval(() => { setCharCount((c) => { if (c >= text.length) { if (intervalRef.current) { clearInterval(intervalRef.current) } return c } return c + 2 }) }, 16) return () => { if (intervalRef.current) { clearInterval(intervalRef.current) } } }, []) return ( }>

{text.slice(0, charCount)} {charCount < text.length && ( )}

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

{title}

{features.map((f) => { const isActive = f.id === activeTab return (
handleTabChange(f.id)} progress={isActive ? progress : 0} title={f.title} />

{f.description}

) })}
{/* Divider */}
{/* Right: animated panel */}
{activeTab === "text" && } {activeTab === "image" && } {activeTab === "video" && }
) } ``` **Update the import paths to match your project setup.**