"use client"; import type { ReactNode } from "react"; import { isValidElement, useState } from "react"; import { motion, useAnimationFrame, useMotionValue, useReducedMotion, useTransform } from "motion/react"; export type BrandLogo = { name: string; /** Logo artwork. The name stays available to screen readers. */ logo?: ReactNode; }; export type MarqueeItem = BrandLogo | ReactNode; type InfiniteBrandMarqueeProps = { items?: MarqueeItem[]; direction?: "left" | "right"; /** Seconds for one full pass of the list. */ duration?: number; label?: string; pauseLabel?: string; /** Forces the static strip in addition to the OS reduced-motion preference. */ reducedMotion?: boolean; className?: string; }; const defaultItems: BrandLogo[] = [ { name: "Northwind" }, { name: "Halcyon" }, { name: "Brightline" }, { name: "Corvid Labs" }, { name: "Meridian" }, { name: "Tessellate" }, ]; function isBrandLogo(item: MarqueeItem): item is BrandLogo { return typeof item === "object" && item !== null && !isValidElement(item) && "name" in item; } function MarqueeEntry({ item }: { item: MarqueeItem }) { if (!isBrandLogo(item)) return <>{item}; if (!item.logo) return <>{item.name}; return ( <> {item.name} ); } export function InfiniteBrandMarquee({ items = defaultItems, direction = "left", duration = 30, label = "Teams using the product", pauseLabel = "Pause logo animation", reducedMotion = false, className = "", }: InfiniteBrandMarqueeProps) { const shouldReduceMotion = Boolean(useReducedMotion()) || reducedMotion; const [userPaused, setUserPaused] = useState(false); const [hovered, setHovered] = useState(false); const [focused, setFocused] = useState(false); const paused = userPaused || hovered || focused || shouldReduceMotion; const offset = useMotionValue(direction === "left" ? 0 : -50); const x = useTransform(offset, (value) => value + "%"); useAnimationFrame((_, delta) => { if (paused || duration <= 0) return; const step = (50 / (duration * 1000)) * delta; let next = offset.get() + (direction === "left" ? -step : step); if (next <= -50) next += 50; if (next >= 0) next -= 50; offset.set(next); }); const itemClass = "flex h-16 min-w-36 shrink-0 items-center justify-center gap-2 rounded-2xl border border-zinc-200 bg-zinc-50 px-6 text-sm font-semibold dark:border-zinc-800 dark:bg-zinc-900"; return (

setHovered(true)} onPointerLeave={() => setHovered(false)} onFocus={() => setFocused(true)} onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocused(false); }} className={"relative overflow-hidden rounded-2xl border border-zinc-200 bg-white py-4 text-zinc-950 dark:border-zinc-800 dark:bg-zinc-950 dark:text-white " + className} >

{shouldReduceMotion ? null : ( )} {shouldReduceMotion ? null : (

)}

); }