Marquee

A component for continuously scrolling and looping inline content.

⚡ Fast setup

🎨 Composable styles

🧩 Headless primitives

🛡️ Accessible by default

🚀 Production ready

🧠 Type-safe API

Usage

<script>
  import {Marquee} from 'ui-ingredients';

  const items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
  ];
</script>

<Marquee.Root>
  <Marquee.Edge side="start" />
  <Marquee.Viewport>
    <Marquee.Content>
      {#each items as item}
        <Marquee.Item>{item}</Marquee.Item>
      {/each}
    </Marquee.Content>
  </Marquee.Viewport>
  <Marquee.Edge side="end" />
</Marquee.Root>

API Reference

Root

Prop	Default	Description
`autoFill`	`false`	`boolean` Whether to automatically duplicate content to fill the container.
`defaultPaused`	`false`	`boolean` Whether the marquee is paused by default.
`delay`	`0`	`number` The delay before the animation starts (in seconds).
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string; viewport: string; content: (index: number) => string; }>` The ids of the elements in the marquee. Useful for composition.
`loopCount`	`0`	`number` The number of times to loop the animation (0 = infinite).
`onComplete`		`() => void` Function called when the marquee completes all loops and stops. Only fires for finite loops (loopCount > 0).
`onLoopComplete`		`() => void` Function called when the marquee completes one loop iteration.
`onPauseChange`		`(details: PauseStatusDetails) => void` Function called when the pause status changes.
`paused`		`boolean` Whether the marquee is paused.
`pauseOnInteraction`	`false`	`boolean` Whether to pause the marquee on user interaction (hover, focus).
`reverse`	`false`	`boolean` Whether to reverse the animation direction.
`side`	`"start"`	`Side` The side/direction the marquee scrolls towards.
`spacing`	`"1rem"`	`string` The spacing between marquee items.
`speed`	`50`	`number` The speed of the marquee animation in pixels per second.
`translations`		`IntlTranslations` The localized messages to use.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-orientation`	The orientation of the marquee
`data-part`	root
`data-paused`	Present when paused
`data-scope`	marquee
`data-state`	"paused" \| "idle"

Content

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-clone`
`data-index`	The index of the item
`data-orientation`	The orientation of the content
`data-part`
`data-reverse`
`data-scope`	marquee
`data-side`

Edge

Prop	Default	Description
`side`		`'start' \| 'end'`
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-orientation`	The orientation of the edge
`data-part`
`data-scope`	marquee
`data-side`

Item

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Viewport

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-orientation`	The orientation of the viewport
`data-part`
`data-scope`	marquee
`data-side`