4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T220a,"use client"; import { useEffect, useMemo, useRef, useState, type ReactNode, } from "react"; import { motion, useReducedMotion } from "motion/react"; export type KineticLogoItem = { id: string; label: string; mark?: ReactNode; tone?: "blue" | "clay" | "moss" | "ink"; }; export type KineticLogoExchangeProps = { items: readonly KineticLogoItem[]; label?: string; eyebrow?: string; pauseLabel?: string; resumeLabel?: string; emptyLabel?: string; interval?: number; columns?: 2 | 3 | 4; className?: string; onSelect?: (item: KineticLogoItem) => void; }; const toneClass = { blue: "bg-[#dce9ff] text-[#174496] dark:bg-[#1c3d82] dark:text-[#e3edff]", clay: "bg-[#ffe4cb] text-[#85410e] dark:bg-[#6b3517] dark:text-[#ffe8d2]", moss: "bg-[#d9f0df] text-[#1d6741] dark:bg-[#1b5334] dark:text-[#ddf6e6]", ink: "bg-neutral-950 text-white dark:bg-neutral-100 dark:text-neutral-950", } as const; function rotate(values: readonly T[]) { if (values.length < 2) return [...values]; return [...values.slice(1), values[0]]; } export function KineticLogoExchange({ items, label = "Works with your tools", eyebrow = "Connections", pauseLabel = "Pause logo exchange", resumeLabel = "Resume logo exchange", emptyLabel = "No connected tools", interval = 3600, columns = 3, className = "", onSelect, }: KineticLogoExchangeProps) { const reduced = useReducedMotion() === true; const cadence = Number.isFinite(interval) ? Math.max(1800, interval) : 3600; const [order, setOrder] = useState(() => items.map((item) => item.id)); const [paused, setPaused] = useState(false); const [pointerPaused, setPointerPaused] = useState(false); const [focusPaused, setFocusPaused] = useState(false); const [selected, setSelected] = useState(items[0]?.id ?? ""); const [cycle, setCycle] = useState(0); const root = useRef(null); const [visible, setVisible] = useState(true); const incomingIds = useMemo(() => items.map((item) => item.id), [items]); const incomingIdSequence = JSON.stringify(incomingIds); const syncedIdSequence = useRef(incomingIdSequence); const byId = useMemo( () => new Map(items.map((item) => [item.id, item])), [items], ); useEffect(() => { if (syncedIdSequence.current === incomingIdSequence) return; syncedIdSequence.current = incomingIdSequence; setOrder(incomingIds); setSelected((current) => current && incomingIds.includes(current) ? current : incomingIds[0] ?? ""); }, [incomingIdSequence, incomingIds]); useEffect(() => { const node = root.current; if (!node || typeof IntersectionObserver === "undefined") return; let intersecting = true; let documentVisible = !document.hidden; const update = () => setVisible(intersecting && documentVisible); const observer = new IntersectionObserver(([entry]) => { intersecting = entry.isIntersecting; update(); }); const onVisibility = () => { documentVisible = !document.hidden; update(); }; observer.observe(node); document.addEventListener("visibilitychange", onVisibility); return () => { observer.disconnect(); document.removeEventListener("visibilitychange", onVisibility); }; }, []); useEffect(() => { if (reduced || paused || pointerPaused || focusPaused || !visible || order.length < 2) return; const timer = window.setInterval(() => { setOrder((current) => rotate(current)); setCycle((current) => current + 1); }, cadence); return () => window.clearInterval(timer); }, [cadence, focusPaused, order.length, paused, pointerPaused, reduced, visible]); const pause = () => setPaused(true); return (

{ if (event.pointerType === "mouse") setPointerPaused(true); }} onPointerLeave={(event) => { if (event.pointerType === "mouse") setPointerPaused(false); }} onFocusCapture={() => setFocusPaused(true)} onBlurCapture={(event) => { const next = event.relatedTarget as Node | null; if (next && event.currentTarget.contains(next)) return; setFocusPaused(false); }} className={`w-full overflow-hidden rounded-[10px] border border-neutral-200 bg-[#f5f5f5] p-3 dark:border-white/[0.14] dark:bg-[#181818] ${className}`} >

{eyebrow}

{label}

{reduced || items.length < 2 ? null : ( )}

{items.length === 0 ? (

{emptyLabel}

) :

{order.map((id, index) => { const item = byId.get(id); if (!item) return null; const active = selected === item.id; return ( { pause(); setSelected(item.id); onSelect?.(item); }} transition={ reduced ? { duration: 0 } : { type: "spring", stiffness: 430, damping: 38, mass: 0.52 } } className={`group relative min-h-[72px] min-w-0 overflow-hidden rounded-lg border bg-white p-2 text-left outline-none transition-[border-color,background-color] duration-150 focus-visible:ring-2 focus-visible:ring-[#4568FF] focus-visible:ring-offset-1 dark:bg-[#202020] ${ active ? "border-neutral-950 dark:border-neutral-50" : "border-black/[0.07] dark:border-white/[0.09]" }`} > {item.mark ?? ( {item.label.slice(0, 2)} )} {item.label} ); })}

}

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/kinetic-logo-exchange.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/kinetic-logo-exchange","itemId":"@motion-lexicon/kinetic-logo-exchange"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/components/kinetic-logo-exchange.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/kinetic-logo-exchange.tsx"}]}]]}],"$L53"]}]

Kinetic Logo Exchange

Installation

Files

components

Styles