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

{title}

{/* Container queries: the layout follows the component's width, not the window's. */}

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

{Array.from({ length: COLS * ROWS }, (_, cell) => ( ))} {TEAM.map((member, i) => (

))}

Get to know the makers

Chat with Devsloka

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

{Array.from({ length: 36 }, (_, cell) => { const glow = GLOW_CELLS.find((item) => item.cell === cell); return ( {glow && ( )} ); })}

{value} {suffix}

{label}

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

); } // ── Frameworks: a drifting row of chips. ── function FrameworksTile() { return (

= FRAMEWORKS.length} 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)]" > {name}

); } // ── Testimonial: rotates with a soft blur crossfade; dots pick one directly. ── const ROTATE_MS = 6000; function TestimonialTile() { const ref = useRef(null); const inView = useInView(ref); const reduceMotion = useReducedMotion(); const [index, setIndex] = useState(0); const [hovered, setHovered] = useState(false); useEffect(() => { if (!inView || hovered || reduceMotion) return; const timer = setTimeout(() => setIndex((i) => (i + 1) % TESTIMONIALS.length), ROTATE_MS); return () => clearTimeout(timer); }, [index, inView, hovered, reduceMotion]); const item = TESTIMONIALS[index]; return (

setHovered(true)} onPointerLeave={() => setHovered(false)} className={cn(tileClass, "flex min-h-72 flex-col p-7 @4xl:min-h-0")} > {/* Soft lit squares in the corner, echoing the stat tile's grid. */}

{[0.5, 0.9, 0.35, 0.25, 1, 0.6, 0.15, 0.4, 0.2].map((strength, i) => ( ))}

{item.brand}

“{item.quote}”

— {item.author}{" "} {item.role}

{TESTIMONIALS.map((testimonial, i) => ( ))}

); } // ── Technologies: a drifting row of icon tiles. ── function TechnologiesTile() { return (

Technologies we use

{/* Vertical padding (offset by a negative margin) keeps the tiles' outline and shadow inside the clipping box, so their top edge isn't cut off. */}

= TECHNOLOGIES.length} title={name} 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)]" > {name}

); } 51:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@devsloka","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/ui/showcase-bento.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]