Marquee

An animated scrolling container that creates a continuous, infinite loop of content with support for both horizontal and vertical directions.

Import

tsx

import { Marquee } from "asheeui";

Usage

tsx

import { Marquee } from "asheeui";

export default function Basic() {
	return (
		<div className="w-full">
			<Marquee>
				<div className="rounded-lg bg-secondary/20 px-6 py-3">Item 1</div>
				<div className="rounded-lg bg-secondary/20 px-6 py-3">Item 2</div>
				<div className="rounded-lg bg-secondary/20 px-6 py-3">Item 3</div>
				<div className="rounded-lg bg-secondary/20 px-6 py-3">Item 4</div>
			</Marquee>
		</div>
	);
}

Examples

Axis

Horizontal scrolling

Item 1

Item 2

Item 3

Item 4

Direction

Scrolling forward →

← Scrolling reverse

Speed presets

Slow scroll

Normal scroll

Fast scroll

Custom speed

Very slow (30 seconds per loop)

Very fast (5 seconds per loop)

Gap

Wide

Gap

Between

Items

Tight

Gap

Pause on hover

Hover to pause scrolling

Fade edges

Smooth fade on edges

With images

Combined example

Feature 1

Feature 2

Feature 3

Feature 4

Props

Prop	Type	Default	Description
`children`	`ReactNode[]`	None	Array of items to scroll (required)
`axis`	`"x" \| "y"`	`"x"`*	Scroll direction axis
`direction`	`"forward" \| "reverse"`	`"forward"`*	Scroll direction
`speed`	`"slow" \| "normal" \| "fast" \| number`	`"normal"`*	Scroll speed (preset or seconds per loop)
`gap`	`string`	`"1.5rem"`*	Gap between items
`pauseOnHover`	`boolean`	`false`*	Pause animation on hover
`fadeEdges`	`boolean`	`false`*	Fade edges of the container
`itemClassName`	`string`	None	Extra classes applied to each item
`className`	`string`	None	Extra classes, merged with internal styles

* Falls back through Global Configuration if not set. See below.

Global Configuration

Marquee reads defaults from four places, in this order of precedence:

Instance prop: set directly on <Marquee />
Component config: components.marquee in your ashee.config
Built-in fallback: component's internal default values

Component config

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    marquee: {
      axis: "x",
      direction: "forward",
      speed: "normal",
      gap: "1.5rem",
      pauseOnHover: true,
      fadeEdges: true,
    },
  },
};

Built-in fallbacks

{
  axis: "x",
  direction: "forward",
  speed: "normal",
  gap: "1.5rem",
  pauseOnHover: true,
  fadeEdges: true,
}

Accessibility

Uses aria-hidden on duplicate content sets to prevent screen reader duplication
Pauses on hover by default to support users with vestibular disorders
Animation respects prefers-reduced-motion via CSS
Content remains accessible even when paused

Notes

Speed Values: The preset speeds correspond to slow (50s), normal (30s), and fast (15s) per full loop. You can also provide a custom number of seconds.
Duplication: The marquee automatically duplicates its children to create the infinite scrolling effect. The duplicate set is hidden from screen readers with aria-hidden.
Fade Edges: When enabled, the edges of the container fade to the background color for a smoother visual effect.
Axis: x scrolls horizontally, y scrolls vertically.
Direction: forward scrolls in the natural direction (left or up), reverse scrolls in the opposite direction.