{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "showcase-bento", "type": "registry:ui", "title": "Showcase Bento", "description": "An animated showcase bento with hopping team portraits, a count-up stat and rotating testimonials.", "files": [ { "path": "src/registry/ui/showcase-bento.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport Image from \"next/image\";\nimport {\n AnimatePresence,\n animate,\n motion,\n useInView,\n useReducedMotion,\n} from \"motion/react\";\nimport {\n Atom,\n Box,\n Braces,\n Component,\n Flame,\n Layers,\n Rocket,\n Sparkles,\n Triangle,\n Wind,\n Zap,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\nconst ACCENT = \"#0A6EFF\";\nconst EASE_OUT = [0.23, 1, 0.32, 1] as const;\nconst EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\n\nconst photo = (id: string) => `https://images.unsplash.com/${id}?q=80&w=200&auto=format&fit=crop`;\n\nconst TEAM = [\n { name: \"Aarav\", src: photo(\"photo-1500648767791-00dcc994a43e\") },\n { name: \"Kabir\", src: photo(\"photo-1507003211169-0a1dd7228f2d\") },\n { name: \"Rohan\", src: photo(\"photo-1506794778202-cad84cf45f1d\") },\n { name: \"Vihaan\", src: photo(\"photo-1531427186611-ecfd6d936c79\") },\n];\n\nconst FRAMEWORKS = [\n { name: \"Next.js\", icon: Triangle },\n { name: \"Vite\", icon: Zap },\n { name: \"Remix\", icon: Layers },\n { name: \"Astro\", icon: Rocket },\n { name: \"shadcn/ui\", icon: Box },\n];\n\nconst TECHNOLOGIES = [\n { name: \"React\", icon: Atom },\n { name: \"TypeScript\", icon: Braces },\n { name: \"Tailwind CSS\", icon: Wind },\n { name: \"Motion\", icon: Sparkles },\n { name: \"Radix UI\", icon: Component },\n { name: \"Next.js\", icon: Triangle },\n { name: \"Firebase\", icon: Flame },\n];\n\n// Placeholder quotes from fictional companies about their own products.\nconst TESTIMONIALS = [\n {\n brand: \"Lumen\",\n quote:\n \"Since adding the AI assistant to our store, our support load has dropped by nearly 60%. Customers get instant answers about sizing and shipping.\",\n author: \"Maya Fernandes\",\n role: \"Founder, Lumen\",\n },\n {\n brand: \"Northwind\",\n quote:\n \"The new onboarding flow cut our time-to-first-value in half. Activation is up and our churn conversations are finally about features, not friction.\",\n author: \"Dev Malhotra\",\n role: \"Head of Product, Northwind\",\n },\n {\n brand: \"Kestrel\",\n quote:\n \"We rebuilt the dashboard in three weeks. It feels faster, reads clearer and our team actually enjoys shipping updates to it now.\",\n author: \"Priya Nair\",\n role: \"CTO, Kestrel\",\n },\n];\n\nconst KEYFRAMES = `\n@keyframes showcase-scroll-x { to { transform: translateX(-50%); } }\n@keyframes showcase-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }\n`;\n\nconst loopClass = \"group-hover/loop:[animation-play-state:paused] motion-reduce:animate-none\";\n\nexport type ShowcaseBentoProps = Omit, \"title\"> & {\n title?: React.ReactNode;\n /** The headline number in the stat tile. */\n stat?: number;\n statSuffix?: string;\n statLabel?: React.ReactNode;\n /** Where \"Chat with Devsloka\" goes. */\n contactHref?: string;\n};\n\nexport function ShowcaseBento({\n title = \"Built for Teams That Ship\",\n stat = 90,\n statSuffix = \"+\",\n statLabel = \"Components shipped\",\n contactHref = \"https://www.devsloka.in/contact\",\n className,\n style,\n ...props\n}: ShowcaseBentoProps) {\n return (\n \n \n
\n

{title}

\n {/* Container queries: the layout follows the component's width, not the window's. */}\n
\n \n \n \n \n \n
\n
\n \n );\n}\n\nconst tileClass = \"relative overflow-hidden rounded-3xl bg-white\";\n\n// ── Team: portraits hop to a free neighbouring cell every couple of seconds. ──\n\nconst COLS = 5;\nconst ROWS = 4;\nconst START_CELLS = [7, 11, 13, 17];\nconst HOP_MS = 2200;\n\nfunction neighbours(cell: number) {\n const row = Math.floor(cell / COLS);\n const col = cell % COLS;\n // Portraits stay in the inner columns; the outer ones fade into the tile's edge.\n return [\n row > 0 && cell - COLS,\n row < ROWS - 1 && cell + COLS,\n col > 1 && cell - 1,\n col < COLS - 2 && cell + 1,\n ].filter((value): value is number => value !== false);\n}\n\nfunction TeamTile({ contactHref }: { contactHref: string }) {\n const ref = useRef(null);\n const inView = useInView(ref);\n const reduceMotion = useReducedMotion();\n const [cells, setCells] = useState(START_CELLS);\n\n useEffect(() => {\n if (!inView || reduceMotion) return;\n const timer = setInterval(() => {\n setCells((current) => {\n const who = Math.floor(Math.random() * current.length);\n const free = neighbours(current[who]).filter((cell) => !current.includes(cell));\n if (free.length === 0) return current;\n const next = [...current];\n next[who] = free[Math.floor(Math.random() * free.length)];\n return next;\n });\n }, HOP_MS);\n return () => clearInterval(timer);\n }, [inView, reduceMotion]);\n\n return (\n
\n \n {Array.from({ length: COLS * ROWS }, (_, cell) => (\n \n ))}\n {TEAM.map((member, i) => (\n \n \"\"\n \n ))}\n \n\n

Get to know the makers

\n \n \n \"\"\n \n Chat with Devsloka\n \n
\n );\n}\n\n// ── Stat: counts up once in view, over a softly glowing grid. ──\n\nconst GLOW_CELLS = [\n { cell: 3, delay: 0 },\n { cell: 12, delay: 1.4 },\n { cell: 18, delay: 2.6 },\n { cell: 27, delay: 0.8 },\n { cell: 33, delay: 3.2 },\n];\n\nfunction StatTile({ value, suffix, label }: { value: number; suffix: string; label: React.ReactNode }) {\n const numberRef = useRef(null);\n const inView = useInView(numberRef, { once: true, amount: 0.6 });\n const reduceMotion = useReducedMotion();\n\n // Writes straight to the DOM, so counting never re-renders React. The server renders\n // the final value, so it's correct without JavaScript.\n useEffect(() => {\n const node = numberRef.current;\n if (!inView || reduceMotion || !node) return;\n const controls = animate(0, value, {\n duration: 1.4,\n ease: EASE_OUT,\n onUpdate: (latest) => {\n node.textContent = String(Math.round(latest));\n },\n });\n return () => controls.stop();\n }, [inView, reduceMotion, value]);\n\n return (\n
\n
\n {Array.from({ length: 36 }, (_, cell) => {\n const glow = GLOW_CELLS.find((item) => item.cell === cell);\n return (\n \n {glow && (\n \n )}\n \n );\n })}\n
\n\n
\n

\n {value}\n {suffix}\n

\n

{label}

\n
\n

\n Animated, accessible React components you copy into your project and own. No lock-in. Just\n source.\n

\n
\n );\n}\n\n// ── Frameworks: a drifting row of chips. ──\n\nfunction FrameworksTile() {\n return (\n \n
    \n {[...FRAMEWORKS, ...FRAMEWORKS, ...FRAMEWORKS, ...FRAMEWORKS].map(({ name, icon: Icon }, i) => (\n = FRAMEWORKS.length}\n className=\"flex shrink-0 items-center gap-2 rounded-lg bg-white py-1.5 pr-3.5 pl-1.5 text-sm shadow-[0_1px_3px_rgb(0_0_0/0.08),0_0_0_1px_rgb(0_0_0/0.04)]\"\n >\n \n \n \n {name}\n \n ))}\n
\n \n );\n}\n\n// ── Testimonial: rotates with a soft blur crossfade; dots pick one directly. ──\n\nconst ROTATE_MS = 6000;\n\nfunction TestimonialTile() {\n const ref = useRef(null);\n const inView = useInView(ref);\n const reduceMotion = useReducedMotion();\n const [index, setIndex] = useState(0);\n const [hovered, setHovered] = useState(false);\n\n useEffect(() => {\n if (!inView || hovered || reduceMotion) return;\n const timer = setTimeout(() => setIndex((i) => (i + 1) % TESTIMONIALS.length), ROTATE_MS);\n return () => clearTimeout(timer);\n }, [index, inView, hovered, reduceMotion]);\n\n const item = TESTIMONIALS[index];\n\n return (\n setHovered(true)}\n onPointerLeave={() => setHovered(false)}\n className={cn(tileClass, \"flex min-h-72 flex-col p-7 @4xl:min-h-0\")}\n >\n {/* Soft lit squares in the corner, echoing the stat tile's grid. */}\n
\n {[0.5, 0.9, 0.35, 0.25, 1, 0.6, 0.15, 0.4, 0.2].map((strength, i) => (\n \n ))}\n
\n\n
\n \n \n

{item.brand}

\n
“{item.quote}”
\n
\n — {item.author}{\" \"}\n {item.role}\n
\n \n \n
\n\n
\n {TESTIMONIALS.map((testimonial, i) => (\n setIndex(i)}\n aria-label={`Show testimonial from ${testimonial.brand}`}\n aria-current={i === index ? \"true\" : undefined}\n className=\"group/dot flex h-4 cursor-pointer items-center outline-none\"\n >\n \n \n ))}\n
\n \n );\n}\n\n// ── Technologies: a drifting row of icon tiles. ──\n\nfunction TechnologiesTile() {\n return (\n
\n

Technologies we use

\n {/* Vertical padding (offset by a negative margin) keeps the tiles' outline and shadow\n inside the clipping box, so their top edge isn't cut off. */}\n
\n
    \n {[...TECHNOLOGIES, ...TECHNOLOGIES].map(({ name, icon: Icon }, i) => (\n = TECHNOLOGIES.length}\n title={name}\n className=\"flex size-12 shrink-0 items-center justify-center rounded-xl bg-white shadow-[0_1px_3px_rgb(0_0_0/0.08),0_0_0_1px_rgb(0_0_0/0.04)]\"\n >\n \n {name}\n \n ))}\n
\n
\n
\n );\n}\n" } ], "dependencies": [ "lucide-react", "motion" ] }