# Marquee

> An infinitely scrolling horizontal content strip

Status: stable. Added in Components 2.0.0.

An infinitely scrolling horizontal content strip.

## Import

```tsx
import { Marquee } from '@oztix/roadie-components'
```

## Examples

### Default

```tsx
<Marquee>
  {['Festivals', 'Concerts', 'Theatre', 'Sports', 'Comedy', 'Exhibitions'].map((label) => (
    <div key={label} className='intent-brand emphasis-subtle rounded-full px-4 py-2 text-sm'>
      {label}
    </div>
  ))}
</Marquee>
```

### Direction

Use `direction='reverse'` to scroll in the opposite direction.

```tsx
<Marquee direction='reverse'>
  {['Festivals', 'Concerts', 'Theatre', 'Sports', 'Comedy', 'Exhibitions'].map((label) => (
    <div key={label} className='intent-accent emphasis-subtle rounded-full px-4 py-2 text-sm'>
      {label}
    </div>
  ))}
</Marquee>
```

### Pause on hover

```tsx
<Marquee pauseOnHover>
  {['Festivals', 'Concerts', 'Theatre', 'Sports', 'Comedy', 'Exhibitions'].map((label) => (
    <div key={label} className='intent-brand-secondary emphasis-subtle rounded-full px-4 py-2 text-sm'>
      {label}
    </div>
  ))}
</Marquee>
```

### Custom speed and gap

```tsx
<Marquee speed={100} gap={32}>
  {['Fast', 'Scrolling', 'Content', 'With', 'Wider', 'Gaps'].map((label) => (
    <div key={label} className='emphasis-normal rounded-xl px-6 py-4'>
      {label}
    </div>
  ))}
</Marquee>
```

## Accessibility

- **Role**: The root element has `role='marquee'`
- **Label**: Use `aria-label` to describe the scrolling content
- **Duplicates**: The cloned children set is marked `aria-hidden='true'` so screen readers only announce content once
- **Motion**: Users with `prefers-reduced-motion` should see paused content. Consider wrapping with a motion preference check in your application

## API reference

### Marquee

```tsx
import { Marquee } from '@oztix/roadie-components/marquee'
```

- `speed`: `number`. Defaults to `50`. Scroll speed in pixels per second.
- `pauseOnHover`: `boolean`. Defaults to `false`. Pause animation on hover.
- `direction`: `"normal" | "reverse"`. Defaults to `normal`. Scroll direction.
- `gap`: `number`. Defaults to `16`. Gap between items in pixels.
- `aria-label`: `string`. Accessible label for the marquee region.

Docs updated 19 Oct 2026.