50: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"] 51:T1402,// Hairline UI · logo-marquee · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; /* ───────────────────────────────────────────────────────── * LOGO MARQUEE: a quiet strip of logos that notices you * * moving logos drift past at a steady speed, fading out at * both edges; any width, any number of logos * hover the strip eases to a stop instead of halting, the * logo you point at stays bright and the rest dim * leave it eases back up to speed * * The speed is in pixels per second, so a longer strip doesn't * move faster. With reduced motion the logos simply sit in a row. * ───────────────────────────────────────────────────────── */ export interface LogoMarqueeProps extends React.HTMLAttributes { /** The logos, each an image or an inline SVG with an accessible name. */ logos: React.ReactNode[]; /** Pixels per second. */ speed?: number; /** Space between logos (px). */ gap?: number; direction?: "left" | "right"; /** Ease to a stop on hover. */ pauseOnHover?: boolean; } const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); export function LogoMarquee({ logos, speed = 36, gap = 56, direction = "left", pauseOnHover = true, className = "", ...props }: LogoMarqueeProps) { const reduced = useReducedMotion(); const trackRef = React.useRef(null); const animation = React.useRef(null); const tween = React.useRef(0); // One loop is exactly one set of logos; its duration follows from the set's width and the speed. React.useEffect(() => { const track = trackRef.current; if (!track || reduced) return; const set = () => track.scrollWidth / 2; const keyframes = direction === "left" ? [{ transform: "translateX(0)" }, { transform: "translateX(-50%)" }] : [{ transform: "translateX(-50%)" }, { transform: "translateX(0)" }]; const a = track.animate(keyframes, { duration: (set() / speed) * 1000, iterations: Infinity, easing: "linear" }); animation.current = a; const observer = new ResizeObserver(() => a.effect?.updateTiming({ duration: (set() / speed) * 1000 })); observer.observe(track); return () => { observer.disconnect(); cancelAnimationFrame(tween.current); a.cancel(); animation.current = null; }; }, [speed, direction, reduced, logos.length]); // Ease the playback rate toward a target, so stopping and starting feel physical. const easeTo = (target: number) => { const a = animation.current; if (!a) return; cancelAnimationFrame(tween.current); const from = a.playbackRate; const start = performance.now(); const step = (now: number) => { const t = Math.min(1, (now - start) / 650); const eased = 1 - Math.pow(1 - t, 3); // Never below zero, or the strip would briefly run backwards. a.playbackRate = t < 1 ? Math.max(0, from + (target - from) * eased) : target; if (t < 1) tween.current = requestAnimationFrame(step); }; tween.current = requestAnimationFrame(step); }; const items = (copy: number) => logos.map((logo, i) => (

0 || undefined} className="flex shrink-0 items-center text-muted-foreground transition-[opacity,color,filter] duration-500 group-hover/marquee:opacity-35 hover:!opacity-100 hover:text-foreground" style={{ marginRight: gap }} > {logo}

)); if (reduced) { return (

{logo}

); } return (

pauseOnHover && easeTo(0)} onPointerLeave={() => pauseOnHover && easeTo(1)} {...props} >

{items(0)}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"registry/logo-marquee.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]