# Marquee

URL: https://ark-ui.com/docs/components/marquee
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/marquee.mdx

A continuous scrolling component for displaying content in a seamless loop.

---

<ComponentPreview id="Marquee" />

## Features

- Smooth GPU-accelerated animations with seamless looping
- Horizontal and vertical scrolling with RTL support
- Auto-fill mode to duplicate content
- Customizable speed and spacing
- Pause on hover/focus with keyboard support
- Programmatic control and finite loops

## Anatomy

To set up the marquee correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

{/* <Anatomy id="marquee" /> */}

## Examples

Learn how to use the `Marquee` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Auto Fill

Use the `autoFill` prop to automatically duplicate content to fill the viewport. The `spacing` prop controls the gap
between duplicated content instances:

<Example id="auto-fill" />

### Reverse Direction

Set the `reverse` prop to reverse the scroll direction:

<Example id="reverse" />

### Vertical Orientation

Set `side="bottom"` (or `side="top"`) to create a vertical marquee:

<Example id="vertical" />

### Custom Speed

Control the animation speed using the `speed` prop, which accepts values in pixels per second:

<Example id="speed" />

### Pause on Interaction

Enable `pauseOnInteraction` to pause the marquee when users hover or focus on it, improving accessibility:

<Example id="pause-on-interaction" />

### Programmatic Control

Use the `useMarquee` hook with `Marquee.RootProvider` to access the marquee API and control playback programmatically:

<Example id="programmatic-control" />

> If you're using the `Marquee.RootProvider` component, you don't need to use the `Marquee.Root` component.

### Finite Loops

Set the `loopCount` prop to run the marquee a specific number of times. Use `onLoopComplete` to track each loop
iteration and `onComplete` to know when all loops finish:

<Example id="finite-loops" />

### Edge Gradients

Add `Marquee.Edge` components to create fade effects at the start and end of the scrolling area:

<Example id="with-edges" />

## Guides

### Styling Requirements

The Marquee component requires CSS keyframe animations to function properly. You'll need to define animations for both
horizontal and vertical scrolling:

```css
@keyframes marqueeX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--marquee-translate));
  }
}

@keyframes marqueeY {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--marquee-translate));
  }
}
```

The component automatically applies the appropriate animation (`marqueeX` or `marqueeY`) based on the scroll direction
and uses the `--marquee-translate` CSS variable for seamless looping.

You can target specific parts of the marquee using `data-part` attributes for custom styling:

- `[data-part="root"]` - The root container
- `[data-part="viewport"]` - The scrolling viewport
- `[data-part="content"]` - The content wrapper (receives animation)
- `[data-part="item"]` - Individual marquee items
- `[data-part="edge"]` - Edge gradient overlays

### Best Practices

- **Enable pause-on-interaction**: Use `pauseOnInteraction` to allow users to pause animations on hover or focus,
  improving accessibility and readability
- **Use descriptive labels**: Provide meaningful `aria-label` values that describe the marquee content (e.g., "Partner
  logos", "Latest announcements")
- **Avoid for critical information**: Don't use marquees for essential content that users must read, as continuously
  moving text can be difficult to process. Consider static displays for important information

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoFill` | `boolean` | No | Whether to automatically duplicate content to fill the container. |
| `defaultPaused` | `boolean` | No | Whether the marquee is paused by default. |
| `delay` | `number` | No | The delay before the animation starts (in seconds). |
| `ids` | `Partial<{ root: string; viewport: string; content: (index: number) => string }>` | No | The ids of the elements in the marquee. Useful for composition. |
| `loopCount` | `number` | No | The number of times to loop the animation (0 = infinite). |
| `onComplete` | `() => void` | No | Function called when the marquee completes all loops and stops.
Only fires for finite loops (loopCount > 0). |
| `onLoopComplete` | `() => void` | No | Function called when the marquee completes one loop iteration. |
| `onPauseChange` | `(details: PauseStatusDetails) => void` | No | Function called when the pause status changes. |
| `paused` | `boolean` | No | Whether the marquee is paused. |
| `pauseOnInteraction` | `boolean` | No | Whether to pause the marquee on user interaction (hover, focus). |
| `reverse` | `boolean` | No | Whether to reverse the animation direction. |
| `side` | `Side` | No | The side/direction the marquee scrolls towards. |
| `spacing` | `string` | No | The spacing between marquee items. |
| `speed` | `number` | No | The speed of the marquee animation in pixels per second. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` | root |
| `[data-state]` | "paused" | "idle" |
| `[data-orientation]` | The orientation of the marquee |
| `[data-paused]` | Present when paused |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-index]` | The index of the item |
| `[data-orientation]` | The orientation of the content |
| `[data-side]` |  |
| `[data-reverse]` |  |
| `[data-clone]` |  |


**Edge Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `side` | `Side` | Yes | The side where the edge gradient should appear. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Edge Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-side]` |  |
| `[data-orientation]` | The orientation of the edge |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseMarqueeReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-orientation]` | The orientation of the viewport |
| `[data-side]` |  |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoFill` | `boolean` | No | Whether to automatically duplicate content to fill the container. |
| `defaultPaused` | `boolean` | No | Whether the marquee is paused by default. |
| `delay` | `number` | No | The delay before the animation starts (in seconds). |
| `ids` | `Partial<{ root: string; viewport: string; content: (index: number) => string }>` | No | The ids of the elements in the marquee. Useful for composition. |
| `loopCount` | `number` | No | The number of times to loop the animation (0 = infinite). |
| `onComplete` | `() => void` | No | Function called when the marquee completes all loops and stops.
Only fires for finite loops (loopCount > 0). |
| `onLoopComplete` | `() => void` | No | Function called when the marquee completes one loop iteration. |
| `onPauseChange` | `(details: PauseStatusDetails) => void` | No | Function called when the pause status changes. |
| `paused` | `boolean` | No | Whether the marquee is paused. |
| `pauseOnInteraction` | `boolean` | No | Whether to pause the marquee on user interaction (hover, focus). |
| `reverse` | `boolean` | No | Whether to reverse the animation direction. |
| `side` | `Side` | No | The side/direction the marquee scrolls towards. |
| `spacing` | `string` | No | The spacing between marquee items. |
| `speed` | `number` | No | The speed of the marquee animation in pixels per second. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` | root |
| `[data-state]` | "paused" | "idle" |
| `[data-orientation]` | The orientation of the marquee |
| `[data-paused]` | Present when paused |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-index]` | The index of the item |
| `[data-orientation]` | The orientation of the content |
| `[data-side]` |  |
| `[data-reverse]` |  |
| `[data-clone]` |  |


**Edge Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `side` | `Side` | Yes | The side where the edge gradient should appear. |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Edge Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-side]` |  |
| `[data-orientation]` | The orientation of the edge |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseMarqueeReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-orientation]` | The orientation of the viewport |
| `[data-side]` |  |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoFill` | `boolean` | No | Whether to automatically duplicate content to fill the container. |
| `defaultPaused` | `boolean` | No | Whether the marquee is paused by default. |
| `delay` | `number` | No | The delay before the animation starts (in seconds). |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; viewport: string; content: (index: number) => string }>` | No | The ids of the elements in the marquee. Useful for composition. |
| `loopCount` | `number` | No | The number of times to loop the animation (0 = infinite). |
| `paused` | `boolean` | No | Whether the marquee is paused. |
| `pauseOnInteraction` | `boolean` | No | Whether to pause the marquee on user interaction (hover, focus). |
| `reverse` | `boolean` | No | Whether to reverse the animation direction. |
| `side` | `Side` | No | The side/direction the marquee scrolls towards. |
| `spacing` | `string` | No | The spacing between marquee items. |
| `speed` | `number` | No | The speed of the marquee animation in pixels per second. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` | root |
| `[data-state]` | "paused" | "idle" |
| `[data-orientation]` | The orientation of the marquee |
| `[data-paused]` | Present when paused |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-index]` | The index of the item |
| `[data-orientation]` | The orientation of the content |
| `[data-side]` |  |
| `[data-reverse]` |  |
| `[data-clone]` |  |


**Edge Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `side` | `Side` | Yes | The side where the edge gradient should appear. |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Edge Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-side]` |  |
| `[data-orientation]` | The orientation of the edge |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `MarqueeApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Viewport Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-orientation]` | The orientation of the viewport |
| `[data-side]` |  |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoFill` | `boolean` | No | Whether to automatically duplicate content to fill the container. |
| `defaultPaused` | `boolean` | No | Whether the marquee is paused by default. |
| `delay` | `number` | No | The delay before the animation starts (in seconds). |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; viewport: string; content: (index: number) => string }>` | No | The ids of the elements in the marquee. Useful for composition. |
| `loopCount` | `number` | No | The number of times to loop the animation (0 = infinite). |
| `onComplete` | `() => void` | No | Function called when the marquee completes all loops and stops.
Only fires for finite loops (loopCount > 0). |
| `onLoopComplete` | `() => void` | No | Function called when the marquee completes one loop iteration. |
| `onPauseChange` | `(details: PauseStatusDetails) => void` | No | Function called when the pause status changes. |
| `paused` | `boolean` | No | Whether the marquee is paused. |
| `pauseOnInteraction` | `boolean` | No | Whether to pause the marquee on user interaction (hover, focus). |
| `ref` | `Element` | No |  |
| `reverse` | `boolean` | No | Whether to reverse the animation direction. |
| `side` | `Side` | No | The side/direction the marquee scrolls towards. |
| `spacing` | `string` | No | The spacing between marquee items. |
| `speed` | `number` | No | The speed of the marquee animation in pixels per second. |
| `translations` | `IntlTranslations` | No | The localized messages to use. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` | root |
| `[data-state]` | "paused" | "idle" |
| `[data-orientation]` | The orientation of the marquee |
| `[data-paused]` | Present when paused |


**Content Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Content Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-index]` | The index of the item |
| `[data-orientation]` | The orientation of the content |
| `[data-side]` |  |
| `[data-reverse]` |  |
| `[data-clone]` |  |


**Edge Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `side` | `Side` | Yes | The side where the edge gradient should appear. |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Edge Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-side]` |  |
| `[data-orientation]` | The orientation of the edge |


**Item Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseMarqueeReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Viewport Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Viewport Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | marquee |
| `[data-part]` |  |
| `[data-orientation]` | The orientation of the viewport |
| `[data-side]` |  |


### Context

These are the properties available when using `Marquee.Context`, `useMarqueeContext` hook or `useMarquee` hook.

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `paused` | `boolean` | Whether the marquee is currently paused. |
| `orientation` | `"horizontal" | "vertical"` | The current orientation of the marquee. |
| `side` | `Side` | The current side/direction of the marquee. |
| `multiplier` | `number` | The multiplier for auto-fill. Indicates how many times to duplicate content.
When autoFill is enabled and content is smaller than container, this returns
the number of additional copies needed. Otherwise returns 1. |
| `contentCount` | `number` | The total number of content elements to render (original + clones).
Use this value when rendering your content in a loop. |
| `pause` | `VoidFunction` | Pause the marquee animation. |
| `resume` | `VoidFunction` | Resume the marquee animation. |
| `togglePause` | `VoidFunction` | Toggle the pause state. |
| `restart` | `VoidFunction` | Restart the marquee animation from the beginning. |


## Accessibility

The Marquee component is built with accessibility in mind:

- Uses appropriate ARIA attributes: `role="region"` and `aria-roledescription="marquee"`
- Cloned content for seamless looping is marked with `aria-hidden="true"` to avoid confusion for screen readers
- Automatically respects user motion preferences via `prefers-reduced-motion`
- Supports keyboard interaction when `pauseOnInteraction` is enabled
- Allows users to pause animations on hover or focus for better readability