4e: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"] 4f: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"] 50:T33c6,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import Link from "next/link"; import { useEffect, useMemo, useState } from "react"; import { cn } from "@/lib/utils"; // ── Types ─────────────────────────────────────────────────────────── interface LogoDef { name: string; /** Image logo; absent for text-only slides (e.g. "& more"). */ src?: string; url: string; width: number; /** Drawn box height; for text slides, the font size. */ height: number; } // ── Logo data ─────────────────────────────────────────────────────── /** * Order is display order: a row shows `slots` logos at a time and cycles * through the list in rounds, so the three-slot hero shows Automattic, Axiom, * AgentMail, then Sim, Orchid, "& more". * * width/height are the drawn box at a nominal scale where the marks read as * one size. Bounding boxes can't be equalized directly — each SVG's box spans * a different mix of icon, ascenders and descenders — so the letterforms are * matched instead and the box follows from the viewBox: * box height = viewBox height × target letterform ÷ letterform in viewBox. * Mixed-case wordmarks (AgentMail, Orchid, "& more") share a 27 cap height. * The all-caps wordmarks (Automattic, Axiom) take 0.88 of that: a word set * entirely in caps reads larger than its cap height. Sim, lowercase-only, * matches on x-height at 0.78 of the cap (mixed-case x-heights here run * ~0.72). Widths follow each viewBox's aspect ratio; "& more" is its measured * advance at that font size. */ const LOGOS: LogoDef[] = [ { name: "Automattic", src: "/brands/automattic.svg", url: "https://automattic.com", width: 331, height: 25.5, }, { name: "Axiom", src: "/brands/axiom.svg", url: "https://axiom.trade", width: 148, height: 30.7, }, { name: "AgentMail", src: "/brands/agentmail.svg", url: "https://agentmail.to", width: 219, height: 40, }, { name: "Sim", src: "/brands/sim.svg", url: "https://sim.ai", width: 55, height: 27, }, { name: "Orchid", src: "/brands/orchid.svg", url: "https://orchid.ai", width: 172, height: 41.3, }, { name: "& more", url: "/works", width: 126, height: 40 }, ]; // ── Constants ─────────────────────────────────────────────────────── /** Gap between neighbouring logos, in the same nominal units as the boxes. */ const GAP = 50; const INITIAL_DELAY = 2500; const CYCLE_INTERVAL = 3000; /** Seconds between neighbours starting their transition. */ const STAGGER = 0.15; const TRANSITION = { duration: 0.5, ease: "easeInOut" } as const; const LOGO_SRCS = LOGOS.flatMap((l) => (l.src ? [l.src] : [])); // ── Hooks ─────────────────────────────────────────────────────────── /** Returns responsive slot count: 1 on mobile, 2 on tablet, 3 on desktop. */ function useSlotCount(): number { const [count, setCount] = useState(3); useEffect(() => { const mqMd = window.matchMedia("(min-width: 768px)"); const mqLg = window.matchMedia("(min-width: 1024px)"); const update = () => { if (mqLg.matches) setCount(3); else if (mqMd.matches) setCount(2); else setCount(1); }; update(); mqMd.addEventListener("change", update); mqLg.addEventListener("change", update); return () => { mqMd.removeEventListener("change", update); mqLg.removeEventListener("change", update); }; }, []); return count; } /** Resolves `true` once every image in `srcs` has loaded (or errored). */ function useImagesPreloaded(srcs: readonly string[]): boolean { const [loaded, setLoaded] = useState(false); useEffect(() => { let cancelled = false; Promise.all( srcs.map( (src) => new Promise((resolve) => { const img = new window.Image(); img.onload = () => resolve(); img.onerror = () => resolve(); img.src = src; }), ), ).then(() => { if (!cancelled) setLoaded(true); }); return () => { cancelled = true; }; }, [srcs]); return loaded; } /** * Counts up every CYCLE_INTERVAL after an initial delay. * Pauses when the tab is hidden so the cadence resumes where it left off. */ function useCycle(enabled: boolean): number { const [step, setStep] = useState(0); useEffect(() => { if (!enabled) return; let timeoutId: ReturnType | null = null; let startedAt = 0; let remaining = step === 0 ? INITIAL_DELAY : CYCLE_INTERVAL; const schedule = (delay: number) => { remaining = delay; startedAt = Date.now(); timeoutId = setTimeout(() => setStep((s) => s + 1), delay); }; const pause = () => { if (timeoutId != null) { clearTimeout(timeoutId); timeoutId = null; remaining = Math.max(0, remaining - (Date.now() - startedAt)); } }; const onVisibilityChange = () => { if (document.hidden) pause(); else schedule(remaining); }; document.addEventListener("visibilitychange", onVisibilityChange); if (!document.hidden) schedule(remaining); return () => { if (timeoutId != null) clearTimeout(timeoutId); document.removeEventListener("visibilitychange", onVisibilityChange); }; }, [enabled, step]); return step; } // ── Styles ────────────────────────────────────────────────────────── type CarouselVariant = "muted" | "dark" | "light"; const variantStyles: Record< CarouselVariant, { base: string; interactive: string } > = { muted: { base: "brightness-0 opacity-40 dark:invert", interactive: "transition-opacity duration-200 hover:opacity-60", }, dark: { base: "brightness-0 dark:invert", interactive: "transition-opacity duration-200 opacity-80 hover:opacity-100", }, /* White logos for blue/dark banners */ light: { base: "brightness-0 invert opacity-55", interactive: "transition-opacity duration-200 hover:opacity-90", }, }; /* Text slides ("& more") mirror each variant's filtered-image color. */ const textVariantStyles: Record< CarouselVariant, { base: string; interactive: string } > = { muted: { base: "text-black opacity-40 dark:text-white", interactive: "transition-opacity duration-200 hover:opacity-60", }, dark: { base: "text-black dark:text-white", interactive: "transition-opacity duration-200 opacity-80 hover:opacity-100", }, light: { base: "text-white opacity-55", interactive: "transition-opacity duration-200 hover:opacity-90", }, }; // ── Motion ────────────────────────────────────────────────────────── /* Rows only orchestrate: neighbours start STAGGER apart, on the way in and out. */ const rowVariants = { enter: { transition: { staggerChildren: STAGGER } }, exit: { transition: { staggerChildren: STAGGER } }, }; const slideVariants = { initial: { y: 20, opacity: 0, filter: "blur(8px)" }, enter: { y: 0, opacity: 1, filter: "blur(0px)", transition: TRANSITION }, exit: { y: -20, opacity: 0, filter: "blur(8px)", transition: TRANSITION }, }; const reducedSlideVariants = { initial: { opacity: 0 }, enter: { opacity: 1, transition: TRANSITION }, exit: { opacity: 0, transition: TRANSITION }, }; // ── Slide ─────────────────────────────────────────────────────────── function Slide({ logo, unit, disableLinks, variant, }: { logo: LogoDef; /** cqw per nominal unit. */ unit: number; disableLinks?: boolean; variant: CarouselVariant; }) { const reducedMotion = useReducedMotion(); const styles = variantStyles[variant]; const textStyles = textVariantStyles[variant]; const content = logo.src ? ( // eslint-disable-next-line @next/next/no-img-element

) : ( {logo.name} ); return ( {disableLinks ? ( content ) : logo.src ? ( {content} ) : ( {content} )} ); } // ── LogoCarousel ──────────────────────────────────────────────────── /** * Fills its container and cycles through LOGOS a round at a time. Every logo * is sized as a share of the container width (cqw) with one scale for the * whole set — the one that lets the widest round fit — so ink heights stay * uniform across rounds and nothing ever reflows. Narrower rounds are shorter * than the container; align them with a `justify-*` class on `className` * (rows are centered by default). Cap the size with a `max-w-*`. */ export function LogoCarousel({ className, disableLinks, variant = "muted", slots, }: { className?: string; disableLinks?: boolean; variant?: CarouselVariant; /** Logos per round on every breakpoint (overrides responsive counting). */ slots?: number; }) { const allLoaded = useImagesPreloaded(LOGO_SRCS); const responsiveSlots = useSlotCount(); const slotCount = Math.min(LOGOS.length, slots ?? responsiveSlots); const rounds = useMemo( () => Array.from({ length: Math.ceil(LOGOS.length / slotCount) }, (_, i) => LOGOS.slice(i * slotCount, (i + 1) * slotCount), ), [slotCount], ); // One scale for every round: the widest row, gaps included, spans 100cqw. const unit = useMemo(() => { const widest = Math.max( ...rounds.map( (round) => round.reduce((sum, l) => sum + l.width, 0) + GAP * (round.length - 1), ), ); return 100 / widest; }, [rounds]); // Rows share one height — the tallest box in the set — so the row never // moves when a round with shorter marks takes over. const rowHeight = Math.max(...LOGOS.map((l) => l.height)) * unit; const step = useCycle(allLoaded && rounds.length > 1); const round = step % rounds.length; return ( {rounds[round].map((logo) => ( ))} ); } 4d:["$","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","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"}]]}]}],["$","li","next",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/next","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":"next"}]]}]}]]}],["$","$L4e",null,{"namespace":"@arc","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/ui/logo-carousel.tsx","content":"$50","type":"registry:component","target":"components/ui/logo-carousel.tsx"}],"className":"h-[70svh] min-h-80"}]]}]