Skip to content

Marquee

A strip of logos, quotes or cards that scrolls by itself in a seamless loop, with a pause button.

alphaSource
Northwind
Fernhill
Brightline
Saltmarsh
Ridgeway
Oakhurst
Waypoint
Galeforce

Installation

pnpm add @syntara/react @syntara/tokens
import { Marquee } from '@syntara/react';

Usage

import { Marquee } from '@syntara/react';

export function Customers() {
  return (
    <Marquee label="Customers">
      <span>Northwind</span>
      <span>Fernhill</span>
      <span>Brightline</span>
    </Marquee>
  );
}

Examples

Two rows

Quote cards in two rows travelling in opposite directions.

“Our Arabic app finally looks like it was designed in Arabic.”

Product designer, Dubai

“We swapped six brand inputs and every screen passed contrast.”

Design lead, Pune

“Dark mode stopped being a second project.”

Front-end engineer, Leeds

“The focus states are better than the ones we drew ourselves.”

Accessibility lead, Bengaluru

“Hindi labels no longer clip. That alone was worth it.”

Engineering manager, Delhi

“One system, five brands, no forks.”

Platform team, Manchester

Fast, without hover pause

A quick strip of badges. pauseOnHover is off, so the pause button and keyboard focus are the ways to stop it.

WCAG 2.2 AA
Right-to-left
Dark mode
Server-driven UI
Hindi and Arabic
Design tokens
Figma variables
Reduced motion

Accessibility

KeysAction
TabMoves into the items (which pauses the strip) and then to the pause button.
SpaceorEnterOn the pause button, pauses or resumes.
  • Meets WCAG 2.2.2 (Pause, Stop, Hide): a visible pause toggle, plus a pause on hover and while anything inside has keyboard focus.
  • Under prefers-reduced-motion nothing moves: the items wrap onto rows and the pause button is removed.
  • Screen readers get one copy of the items as a list inside a labelled region. The copies that make the loop seamless are aria-hidden and inert, so they can't be tabbed to.
  • Travels towards the start of the line, so it runs rightwards on right-to-left pages.

Guidelines

Do

  • Use it for content people can skip: logos, quotes, highlights.

Don’t

  • Don't put anything a person must read or act on in a marquee.
  • Don't use more than two on one screen.

API reference

Marquee

labelRequired
string

Names the strip for screen readers, e.g. "Customers".

childrenRequired
ReactNode

The items. Each child becomes one list item.

speed
  • slow
  • mddefault
  • fast

How fast the items travel. The pace is the same however long the strip is.

reverse
boolean

Travel towards the end of the line instead of the start.

Default false

pauseOnHover
boolean

Pause while the pointer is over the strip.

Default true

pauseLabel
string

Accessible name of the pause toggle.

Default 'Pause'

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour3
text.subtletext.defaultfocus.ring
Type1
font.size.md
Space and size5
control.heightspace.2space.4space.10space.12
Shape1
radius.button
Motion4
motion.duration.fastmotion.duration.springmotion.easingmotion.spring