Marquee

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

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.

Examples

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

Example not found

Example not found

Example not found

Example not found

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 not found

Example not found

Example not found

Example not found

Reverse Direction

Set the reverse prop to reverse the scroll direction:

Example not found

Example not found

Example not found

Example not found

Vertical Orientation

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

Example not found

Example not found

Example not found

Example not found

Custom Speed

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

Example not found

Example not found

Example not found

Example not found

Pause on Interaction

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

Example not found

Example not found

Example not found

Example not found

Programmatic Control

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

Example not found

Example not found

Example not found

Example not found

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 not found

Example not found

Example not found

Example not found

Edge Gradients

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

Example not found

Example not found

Example not found

Example not found

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:

@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

Root

Content

Edge

Item

RootProvider

Viewport

Context

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

API

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