Marquee

Root · Viewport · Content · Edge · Item

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

Prop	Type	Default	Description
`side`	`Side`		The side where the edge gradient should appear.

A styled part — no props of its own; it takes the anatomy's shared styling.

Prop	Type	Default	Description
`autoFill`	`boolean`	`false`	Whether to automatically duplicate content to fill the container.
`defaultPaused`	`boolean`	`false`	Whether the marquee is paused by default.
`delay`	`number`	`0`	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`	`number`	`0`	The number of times to loop the animation (0 = infinite).
`paused`	`boolean`		Whether the marquee is paused.
`pauseOnInteraction`	`boolean`	`false`	Whether to pause the marquee on user interaction (hover, focus).
`reverse`	`boolean`	`false`	Whether to reverse the animation direction.
`side`	`marquee.Side`	`"start"`	The side/direction the marquee scrolls towards.
`spacing`	`string`	`"1rem"`	The spacing between marquee items.
`speed`	`number`	`50`	The speed of the marquee animation in pixels per second.
`translations`	`marquee.IntlTranslations`		The localized messages to use.

Event	Payload
`pauseChange`	`details: PauseStatusDetails`
`complete`	`—`
`loopComplete`	`—`
`update:paused`	`paused: boolean`

A styled part — no props of its own; it takes the anatomy's shared styling.