16 — Components

Logo Ticker

Horizontal marquee of club crests — seamless infinite scroll with pause-on-hover and soft edge fades. 37 px tiles with a 30 px gap; crests wear a soft drop shadow so they read on cream, navy, or image backgrounds. Pure CSS animation; respects prefers-reduced-motion. Only scrolls when the content actually overflows the container.

1 — Default — on Light

Eighty-second loop, pause on hover, soft edge fade. Default canvas is transparent so the drop-shadowed crests sit directly on whatever surface is below.

tsx

import { LogoTicker } from "@cpsl/ui"

<LogoTicker
  logos={[
    { url: "/logos/charlotte-fc.svg",     alt: "Charlotte FC" },
    { url: "/logos/raleigh-athletic.svg", alt: "Raleigh Athletic" },
    // …
  ]}
  heading="Member Clubs"
  durationSeconds={80}
  pauseOnHover
  edgeFade
/>

2 — On Dark Navy

Same component on the navy surface. The drop shadow softens but keeps the crests lifted off the background — pass the container color via sectionBackground so the edge fade matches.

3 — With heading

Optional eyebrow rendered above the marquee in Barlow Condensed, uppercase, 20 px. Inherits text colour from the parent section.

Member Clubs

4 — Reversed · Faster

Reverse direction with a shorter duration — useful for stacking two tickers travelling in opposite directions.

Props

LogoTickerProps

logosLogoTickerLogo[]—Array of { url, alt, key }. Typically Sanity image asset URLs in production.

headingstringundefinedOptional uppercase eyebrow above the marquee.

durationSecondsnumber80Full loop time when content overflows. Lower is faster.

reversebooleanfalseReverse the scroll direction.

pauseOnHoverbooleantruePause the animation while the pointer is over the ticker.

edgeFadebooleantrueSoft gradient fade on the left/right edges. Only rendered when the ticker is actually scrolling.

sectionBackgroundstring'transparent'Background color of the wrapping section; also drives the edge fade colour.