TickerCarousel Component

TickerCarousel is a continuously auto-scrolling horizontal carousel that loops seamlessly. It's ideal for landing pages showing logos, client names, or other content that should scroll indefinitely.

Usage

Basic Ticker

Items scroll continuously from right to left by default:

Acme Corp

Globex

Initech

Umbrella

Cyberdyne

Wonka

<TickerCarousel>
  <div>Acme Corp</div>
  <div>Globex</div>
  <div>Initech</div>
  <div>Umbrella</div>
  <div>Cyberdyne</div>
  <div>Wonka</div>
</TickerCarousel>

Scroll Direction

Control the scroll direction with the direction prop:

Direction: left (default)

Item 1

Item 2

Item 3

Item 4

Item 5

Direction: right

Item 1

Item 2

Item 3

Item 4

Item 5

<TickerCarousel direction="left">...</TickerCarousel>
<TickerCarousel direction="right">...</TickerCarousel>

Pause on Hover

By default, the carousel pauses when hovered. Set pauseOnHover to false to keep scrolling:

Always scrolling 1

Always scrolling 2

Always scrolling 3

Always scrolling 4

Always scrolling 5

<TickerCarousel pauseOnHover={false}>
  <div>Always scrolling 1</div>
  <div>Always scrolling 2</div>
  ...
</TickerCarousel>

Static When Content Fits

When the total content width fits within the container, the carousel remains static (no scrolling animation):

// With only a few small items that fit the container
<TickerCarousel>
  <div>A</div>
  <div>B</div>
</TickerCarousel>

Props

Name	Type	Default	Description
`children`	`JSXElement`	required	Items to display in the carousel
`direction`	`"left" \| "right" \| "text-direction"`	"text-direction"	Scroll direction. "text-direction" respects RTL/LTR based on the document direction
`pauseOnHover`	`boolean`	true	Whether to pause scrolling when the user hovers over the carousel
`styles`	`StyleXStyles`	undefined	Additional StyleX styles to apply to the container

Behavior

Items are cloned to create a seamless infinite scroll effect

Pauses on hover by default (configurable via pauseOnHover)

Pauses when any child element receives keyboard focus

Uses CSS animations for smooth 60fps performance

Automatically detects if content fits container and disables animation

Respects prefers-reduced-motion media query

Theming

The TickerCarousel uses these theme variables for customization:

carouselScrollSpeed - Duration of one complete scroll cycle (default: 30s)

carouselGap - Gap between items

Accessibility

Uses role="marquee" to indicate auto-scrolling content to screen readers

Pauses on focus to allow keyboard users to interact with content

Cloned items are marked with aria-hidden to prevent duplicate announcements

Respects prefers-reduced-motion preference

Edge Cases

Scenario	Behavior
0 children	Renders empty container
1 child	Static if content fits, otherwise scrolls
Content fits container	Static (no scroll animation)