Marquee
Infinite horizontal marquee for text, badges, logos, or image strips with optional reverse direction and pause-on-hover.
For isolated previews, theme switching, and sandbox editing, open the Marquee playground on holydocs.com .
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.
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.
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
Highlighted message blocks for drawing attention to notes, tips, warnings, and other contextual information.
More
- Interactive playground: Marquee on holydocs.com
- Component library index: /components