Marquee
pura-marquee horizontally scrolls the default slot content in a continuous loop, cloning the children into an aria-hidden mirror so the seam stays invisible. Use it for partner logos, scrolling announcements, or highlights. It respects prefers-reduced-motion (stopping the animation entirely) and exposes an agent-native layer: data-pura-marquee-* attributes mirror the live state, and each instance registers itself in window.__puraMarquees under the data-pura-id key, letting agents enumerate, read, and control each marquee without scanning the DOM.
Preview
<div style="max-width:640px;border:1px solid var(--pura-border,#e2e2e2);border-radius:8px;padding:12px">
<pura-marquee id="m1" speed="18" pause-on-hover label="Partners">
<strong>Acme</strong>
<strong>Globex</strong>
<strong>Initech</strong>
<strong>Umbrella</strong>
<strong>Soylent</strong>
<strong>Stark Industries</strong>
</pura-marquee>
<button id="toggle" type="button" style="margin-top:12px">Pause / Resume</button>
</div>
<script type="module">
import "/pura/lib/marquee.js";
document.getElementById("toggle").addEventListener("click", () => {
document.getElementById("m1").toggle();
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
speed | number | 20 | Seconds for one full loop. Lower = faster. |
direction | "left" | "right" | left | Direction the content scrolls. |
pause-on-hover | boolean | false | When present, pauses while under the mouse or with internal focus. |
paused | boolean | false | Reflected state; present when the animation is stopped. |
label | string | Scrolling content | aria-label text applied to the role=marquee container. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/marquee.js"></script>import "./pura/lib/marquee.js";