Marquee
Seamless, accessible scrolling item ticker — logo bands, trust strips.
Marquee renders an item set on a continuously scrolling track — the "trusted by" logo band pattern. It duplicates the item set once internally (the duplicate is aria-hidden) so the loop reads as one unbroken pass, then animates translateX(0 → -50%) at a fixed, linear speed.
It has one visual appearance — direction, pauseOnHover, and fade are behavior knobs, not distinct variants.
Marquee
Use when: A continuously scrolling strip of same-sized items — the "trusted by" logo band. The motion is the point.
Don't: The set fits and does not need to move — that's a static Cluster.
<Marquee>{logos}</Marquee>Cluster
Use when: A wrapping horizontal row of peers with a shared gap — tag lists, action rows, logo grids that sit still.
Don't: The strip should read as one unbroken, moving pass — that's Marquee.
<Cluster>{items}</Cluster>Use it for
- A "trusted by" / partner-logo band on a marketing page
- Any horizontally-scrolling strip of same-sized items (badges, wordmarks) that should read as continuous, not paginated
Reach for a static Cluster layout when the item set doesn't need to scroll — Marquee's animation is the point, not a fallback for overflow.
Import
import { Marquee } from '@brikdesigns/bds';Default
Item images are the consumer's responsibility for alt text, loading="lazy", and pre-monochroming — Marquee does not apply a runtime grayscale() filter.
Accessibility
- The animation stops under
prefers-reduced-motion: reduce. The track collapses to a single, centered, wrapped row instead of omitting motion handling. - The duplicate item copy that fills the scrolling track is
aria-hidden="true"— assistive tech announces the item set once, not twice. - Marquee provides no accessible name of its own; wrap it with a heading (
<h2>Trusted by</h2>) in the surrounding page, same as any other content band.
API
| Prop | Type | Default |
|---|---|---|
children | ReactNode | — (required — the item set, rendered twice internally) |
direction | 'ltr' | 'rtl' | 'ltr' |
pauseOnHover | boolean | false |
fade | boolean | true |
gap | number | string | — (falls back to --bds-marquee-gap, 40px) |
logoHeight | number | string | — (falls back to --bds-marquee-logo-height, 24px) |
Inherits all native <div> attributes (className, style, data-*, …).