---
id: marquee
title: Marquee
description: A continuous scrolling component for displaying content in a seamless loop.
---

<ComponentPreview id="Marquee" />

## Anatomy

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

```tsx
<Marquee.Root>
  <Marquee.Edge />
  <Marquee.Viewport>
    <Marquee.Content>
      <Marquee.Item />
    </Marquee.Content>
  </Marquee.Viewport>
</Marquee.Root>
```

## Examples

<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

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

<Example id="reverse" />

### Vertical

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

<Example id="vertical" />

### 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.

### 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" />

### Edges

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

<Example id="with-edges" />

## Guides

### Content Animation

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

<ComponentTypes id="marquee" />

### Context

<ContextType id="marquee" />
