A CSS-only scrolling banner for announcements, logo strips, and repeating inline content.

Content is duplicated internally so the loop stays seamless — no JavaScript required. Respects prefers-reduced-motion (animation stops automatically).

Examples

# Announcement ticker
<.marquee>
  <:item>Free shipping on all orders</:item>
  <:item>New collection available</:item>
  <:item>Sign up for 10% off</:item>
</.marquee>

# Logo strip — slow, larger gaps
<.marquee speed="slow" gap="lg">
  <:item><img src="/logo1.svg" alt="Company 1" /></:item>
  <:item><img src="/logo2.svg" alt="Company 2" /></:item>
</.marquee>

# Reverse direction, no edge fade
<.marquee direction="right" fade_edges={false}>
  <:item>Right-scrolling content</:item>
</.marquee>

Attributes

• direction - Scroll direction. One of left, right. Defaults to left.
• speed - Animation speed. One of slow, default, fast. Defaults to default.
• pause_on_hover - Pause animation on mouse hover. Defaults to true.
• fade_edges - Gradient mask at the left/right edges. Defaults to true.
• gap - Gap between items. One of sm, default, lg. Defaults to default.
• class - Additional CSS classes.

Slots

• item - Required repeating slot for marquee items.

Accessibility

• The duplicated content track sets aria-hidden="true" and inert to avoid screen reader and keyboard repetition.
• Respects prefers-reduced-motion — the CSS animation halts when the user has expressed a motion preference.
• Ensure each item has its own accessible label (e.g. alt text on images).