Marquee
Continuously scrolling content strip with configurable speed, direction, gap, and pause-on-hover behavior for logos, testimonials, and announcements.
<arc-marquee>Overview
Marquee creates a looping horizontal scroll animation for its slotted content. The component duplicates its children into a shadow-DOM clone group, then uses a CSS keyframe animation to translate the combined track so that as the primary group scrolls out of view, the duplicate takes its place, creating an infinite loop with no visible seam. This technique avoids JavaScript-driven animation, relying entirely on GPU-accelerated CSS transforms.
The scroll speed is controlled by the speed prop, which represents pixels per second. The component automatically calculates the animation duration based on the measured width of the content group, so the perceived speed remains consistent regardless of how much content is slotted. A ResizeObserver recalculates the duration when content changes size, so the speed holds after dynamic content updates.
By default, the marquee pauses when the user hovers over it (pause-on-hover is true), giving users time to read or interact with the content. The component also respects prefers-reduced-motion by pausing the animation entirely for users who have opted out of motion. The direction prop accepts "left" (default) or "right" to control which way the content scrolls, and the gap prop sets the spacing between items using any valid CSS length.
Guidelines
When to use
- Use Marquee for decorative content like logo strips, partner logos, or scrolling testimonials
- Keep `pause-on-hover` enabled (default) so users can read individual items at their own pace
- Provide enough slotted items to fill the viewport width. Otherwise the duplicate gap may be visible
- Set `speed` between 20-60 pixels per second for a comfortable, readable scroll rate
- Test with `prefers-reduced-motion` enabled to confirm the static fallback looks correct
When not to use
- Do not use Marquee for critical information that users must read. It is easy to miss scrolling content
- Do not place interactive elements (buttons, links) inside the marquee without `pause-on-hover`. They become hard to click
- Do not set `speed` above 100. Fast scrolling is disorienting and inaccessible
- Do not use Marquee as a substitute for a proper notification system or alert banner
- Avoid stacking multiple Marquees moving in different directions. The competing motion is visually overwhelming
Features
- Infinite loop using duplicated shadow-DOM content and CSS keyframe translation
- Speed prop in pixels-per-second with automatic duration calculation based on content width
- ResizeObserver-driven recalculation ensures consistent speed after dynamic content changes
- Pause-on-hover enabled by default: the animation pauses when the cursor enters the track
- Respects `prefers-reduced-motion` media query by pausing animation for motion-sensitive users
- Configurable scroll direction: `left` (default) or `right`
- Adjustable gap between items using any valid CSS length via the `gap` prop
- GPU-accelerated animation using `will-change: transform` for smooth 60fps performance
Preview
Usage
Marquee is in the marketing domain group, so it is absent from the default @arclux/arc-ui barrel. Import it from@arclux/arc-ui/marketing, or from its own subpath@arclux/arc-ui/marquee. Everything else (the element, the CSS, the framework wrappers, the support it gets) is unchanged.
<arc-marquee speed="40" direction="left" pause-on-hover>
<img src="/logos/partner-1.svg" alt="Partner 1" height="32" />
<img src="/logos/partner-2.svg" alt="Partner 2" height="32" />
<img src="/logos/partner-3.svg" alt="Partner 3" height="32" />
<img src="/logos/partner-4.svg" alt="Partner 4" height="32" />
</arc-marquee>import { Marquee } from '@arclux/arc-ui-react';
export default function Example() {
return (
<Marquee speed={40} direction="left" pauseOnHover>
<img src="/logos/partner-1.svg" alt="Partner 1" height="32" />
<img src="/logos/partner-2.svg" alt="Partner 2" height="32" />
<img src="/logos/partner-3.svg" alt="Partner 3" height="32" />
<img src="/logos/partner-4.svg" alt="Partner 4" height="32" />
</Marquee>
);
}<script setup>
import { Marquee } from '@arclux/arc-ui-vue';
</script>
<template>
<Marquee :speed="40" direction="left" pause-on-hover>
<img src="/logos/partner-1.svg" alt="Partner 1" height="32" />
<img src="/logos/partner-2.svg" alt="Partner 2" height="32" />
<img src="/logos/partner-3.svg" alt="Partner 3" height="32" />
<img src="/logos/partner-4.svg" alt="Partner 4" height="32" />
</Marquee>
</template><script>
import { Marquee } from '@arclux/arc-ui-svelte';
</script>
<Marquee speed={40} direction="left" pause-on-hover>
<img src="/logos/partner-1.svg" alt="Partner 1" height="32" />
<img src="/logos/partner-2.svg" alt="Partner 2" height="32" />
<img src="/logos/partner-3.svg" alt="Partner 3" height="32" />
<img src="/logos/partner-4.svg" alt="Partner 4" height="32" />
</Marquee>import { Component } from '@angular/core';
import { Marquee } from '@arclux/arc-ui-angular';
@Component({
imports: [Marquee],
template: `
<arc-marquee [speed]="40" direction="left" pause-on-hover>
<img src="/logos/partner-1.svg" alt="Partner 1" height="32" />
<img src="/logos/partner-2.svg" alt="Partner 2" height="32" />
<img src="/logos/partner-3.svg" alt="Partner 3" height="32" />
<img src="/logos/partner-4.svg" alt="Partner 4" height="32" />
</arc-marquee>
`,
})
export class MyComponent {}import { Marquee } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<Marquee speed={40} direction="left" pauseOnHover>
<img src="/logos/partner-1.svg" alt="Partner 1" height="32" />
<img src="/logos/partner-2.svg" alt="Partner 2" height="32" />
<img src="/logos/partner-3.svg" alt="Partner 3" height="32" />
<img src="/logos/partner-4.svg" alt="Partner 4" height="32" />
</Marquee>
);
}import { Marquee } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<Marquee speed={40} direction="left" pauseOnHover>
<img src="/logos/partner-1.svg" alt="Partner 1" height="32" />
<img src="/logos/partner-2.svg" alt="Partner 2" height="32" />
<img src="/logos/partner-3.svg" alt="Partner 3" height="32" />
<img src="/logos/partner-4.svg" alt="Partner 4" height="32" />
</Marquee>
);
}<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-marquee — requires marquee.css + tokens.css (or arc-ui.css) -->
<div class="arc-marquee">
</div><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-marquee — self-contained, no external CSS needed -->
<div class="arc-marquee">
</div>API
gapstring'var(--space-xl)'- CSS length value for the gap between slotted items. Accepts any valid CSS length or custom property.
speednumber40- Scroll speed in pixels per second. The animation duration is calculated from the content width divided by this value.
direction'left' | 'right''left'- Scroll direction.
leftscrolls content from right to left (default),rightreverses the direction. pauseOnHoverbooleantrue- When true, the animation pauses while the cursor hovers over the marquee.