Marquee

A data display component that horizontally loops a continuous, infinitely scrolling banner of content.

Vertical Orientation

Set the orientation prop to vertical to change the orientation of the component.

Draggable

Use the draggable prop to activate the drag behavior.

Animation Classes

You can set directly the CSS variables to control the animation behavior.

Customizing

globals.css


:root {
  --ex-marquee-gap-x: calc(var(--spacing) * 8);
  --ex-marquee-gap-y: calc(var(--spacing) * 8);
 
  --ex-marquee-delay: 0s;
  --ex-marquee-ease: linear;
  --ex-marquee-duration: 20s;
 
  --ex-marquee-fill: forwards;
  --ex-marquee-direction: normal;
 
  --ex-marquee-count: infinite;
  --ex-marquee-play: running;
 
  --ex-marquee-animation-x: marquee-scroll-x;
  --ex-marquee-animation-y: marquee-scroll-y;
}

API

Marquee

Element	Selector
`Marquee`	`.ex-marquee`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`orientation`	`enum of ["horizontal", "vertical"]`	`horizontal`

Marquee Track

Element	Selector
`Marquee.Track`	`.ex-marquee-track`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Marquee Item

Element	Selector
`Marquee.Item`	`.ex-marquee-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`