Marquee

Overview

Render continuously looping horizontal or vertical ticker content with pause and reduced-motion safeguards.

Usage

<script lang="ts">
  import { Marquee } from '@lostgradient/cinder/marquee';
</script>

<Marquee label="Announcements">
  {#snippet children()}
    <span>New release is live</span>
    <span>•</span>
    <span>Check the changelog for details</span>
  {/snippet}
</Marquee>

Live preview

When to use

Use when

Showing repeating announcements, partner logos, or status strips in a constrained space.
You need CSS-driven, seamless loop motion that can pause on hover/focus.

Avoid when

Users need to manually scroll and inspect static overflow content. Use Scroll area instead
Information should remain fixed in place without motion emphasis.

Examples

Announcement ticker

Continuously loop short announcements with pause on hover and focus.

Vertical status strip

Loop status messages vertically and pause while focused.

Props

Props for marquee
Name	Type	Default	Required	Description
`direction`	`'horizontal' \| 'vertical'`	`'horizontal'`		Scroll direction for the looping track.
`duration`	`text`	`'24s'`		Animation duration for one complete loop (valid CSS time).
`gap`	`text`	`'1.5rem'`		Gap between repeated items (valid CSS length).
`label`	`text`			Accessible region label for the marquee container.
`pauseOnHover`	`boolean`	`true`		Pause animation while hovered (pointer-capable devices).
`pauseOnFocus`	`boolean`	`true`		Pause animation while any child is focused.
`children`	`snippet`		req	Rendered marquee content.