> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Marquee

Infinite horizontal marquee for text, badges, logos, or image strips with optional reverse direction and pause-on-hover.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Marquee playground on holydocs.com](https://holydocs.com/components/marquee).

## When to use

Use this component when you need stronger document structure, annotation, or narrative pacing inside a page.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### Text Strip

Moving badges for launches, features, or social proof.

AI search
  OpenAPI sync
  Theme system
  Rate limits
  Embeddable docs

~~~mdx
<Marquee speed={22}>
  <MarqueeItem><Badge variant="success">AI search</Badge></MarqueeItem>
  <MarqueeItem><Badge variant="default">OpenAPI sync</Badge></MarqueeItem>
  <MarqueeItem><Badge variant="new">Theme system</Badge></MarqueeItem>
  <MarqueeItem><Badge variant="warning">Rate limits</Badge></MarqueeItem>
  <MarqueeItem><Badge variant="success">Embeddable docs</Badge></MarqueeItem>
</Marquee>
~~~

### Image Strip

Logos or screenshots scrolling continuously.

![HolyDocs screenshot one](https://cdn.screenframed.com/r/ren_01KP61GS6GTFAX7P2QGZ4R6K2G.png)
  ![HolyDocs screenshot two](https://cdn.screenframed.com/r/ren_01KP63F5MD99TKH0DQZQRH30JQ.png)
  ![HolyDocs screenshot three](https://cdn.screenframed.com/r/ren_01KP61F5YWDVB3FV83N7PS41P0.png)

~~~mdx
<Marquee direction="right" speed={28}>
  <MarqueeItem><img src="https://cdn.screenframed.com/r/ren_01KP61GS6GTFAX7P2QGZ4R6K2G.png" alt="HolyDocs screenshot one" width="320" height="180" loading="lazy" /></MarqueeItem>
  <MarqueeItem><img src="https://cdn.screenframed.com/r/ren_01KP63F5MD99TKH0DQZQRH30JQ.png" alt="HolyDocs screenshot two" width="320" height="200" loading="lazy" /></MarqueeItem>
  <MarqueeItem><img src="https://cdn.screenframed.com/r/ren_01KP61F5YWDVB3FV83N7PS41P0.png" alt="HolyDocs screenshot three" width="320" height="240" loading="lazy" /></MarqueeItem>
</Marquee>
~~~

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `speed` | `number` | `24` | Loop duration in seconds. Lower values move faster. |
| `direction` | `string` | `left` | Scroll direction. |
| `pauseOnHover` | `boolean` | `true` | Pauses the animation while hovered. |

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
<Marquee speed={22}>
  <MarqueeItem><Badge variant="success">AI search</Badge></MarqueeItem>
  <MarqueeItem><Badge variant="default">OpenAPI sync</Badge></MarqueeItem>
  <MarqueeItem><Badge variant="new">Theme system</Badge></MarqueeItem>
  <MarqueeItem><Badge variant="warning">Rate limits</Badge></MarqueeItem>
  <MarqueeItem><Badge variant="success">Embeddable docs</Badge></MarqueeItem>
</Marquee>
~~~

## Tips

- Keep the surrounding copy short so the component remains the focal point instead of becoming redundant chrome.
- Prefer one clear job per component instance. If a block is trying to explain, navigate, and warn at the same time, split it up.
- Check the page in both light and dark mode when you stack multiple content components together. Dense compositions can feel heavier than expected.

## Related Components

**[Callout](/components/callout)**

Highlighted message blocks for drawing attention to notes, tips, warnings, and other contextual information.
**[Card](/components/card)**

Versatile content containers that can display titles, icons, descriptions, and optional links.
**[CardGroup](/components/card-group)**

Responsive grid container for laying out multiple cards in even columns.

## More

- Interactive playground: [Marquee on holydocs.com](https://holydocs.com/components/marquee)
- Component library index: [/components](/components)