Marquee — ARC UI

Components

Marquee

content

static

<arc-marquee>

Overview

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

Seamless 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 -- 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

Acme Corp Globex Inc Initech Umbrella Wayne Enterprises Stark Industries

Usage

<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';

<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: `
    <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>
  `,
})
export class MyComponent {}

import { Marquee } from '@arclux/arc-ui-solid';

<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';

<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

Prop	Type	Default	Description
`speed`	`number`	`40`	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. `left` scrolls content from right to left (default), `right` reverses the direction.
`pause-on-hover`	`boolean`	`true`	When true, the animation pauses while the cursor hovers over the marquee.
`gap`	`string`	`var(--space-xl)`	CSS length value for the gap between slotted items. Accepts any valid CSS length or custom property.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight