Signature / Molecule

Marquee

Infinite horizontal or vertical scrolling content with pause-on-hover support.

Edit on GitHub

pnpm dlx @glinui/cli@latest add marquee

We replaced three motion helpers with one engine switch.

Priya N.Design engineer

Reduced motion works without a single extra branch.

Marcus T.Frontend lead

Our dashboard feels faster and the bundle got smaller.

Aiko S.Founder

Tokens, motion and a11y all behave the same everywhere.

Leo B.Staff engineer

Installation$

Install from

pnpm dlx @glinui/cli@latest add marquee

Prefer the package?

Usage$

Place any elements as children. The marquee duplicates them to create a seamless infinite scroll loop.

Examples$

Vertical$

AlphaBetaGammaDeltaEpsilon

import { Marquee, Badge } from "@glinui/ui"


export function MarqueeVerticalDemo() {
return (
  <Marquee direction="up" speed={20} gap={8} className="h-48">
    {["Alpha", "Beta", "Gamma", "Delta", "Epsilon"].map((t) => (
      <Badge key={t} variant="outline">{t}</Badge>
    ))}
  </Marquee>
)
}

Pause on Hover$

Hovertopausethescroll

import { Marquee, Badge } from "@glinui/ui"


export function MarqueePauseDemo() {
return (
  <Marquee pauseOnHover speed={15} gap={24}>
    {["Hover", "to", "pause", "the", "scroll"].map((t) => (
      <Badge key={t} className="mx-2">{t}</Badge>
    ))}
  </Marquee>
)
}

Engines$

The engine prop is not applicable. Infinite css translate loop that must stay compositor-only. It stays css only and still honors motion level none and reduced motion.

Accessibility$

The duplicated children are marked aria-hidden to prevent screen readers from reading content twice.
Avoid placing interactive elements inside the marquee.

Reduced Motion$

Animation uses motion-safe:animate-marquee-x/y. Under prefers-reduced-motion, the content stays static.

API Reference$

Prop	Type	Required	Default	Description
`direction`	`"left" \| "right" \| "up" \| "down"`	No	`"left"`	Auto-generated from TypeScript source.
`gap`	`number`	No	`16`	Space between items and between loop copies, in px.
`pauseOnHover`	`boolean`	No	`false`	Auto-generated from TypeScript source.
`repeat`	`number`	No	`-`	Fixed number of content copies. By default the marquee measures itself and renders just enough copies to fill the container.
`reverse`	`boolean`	No	`false`	Auto-generated from TypeScript source.
`speed`	`number`	No	`30`	Seconds for one full loop.

Source$

import { Marquee } from "@glinui/ui"

packages/ui/src/components/marquee.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/marquee.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

MarqueeProps

`MarqueeProps`

Prop	Type	Required	Default	Description
`direction`	`"left" \| "right" \| "up" \| "down"`	No	`"left"`	-
`gap`	`number`	No	`16`	Space between items and between loop copies, in px.
`pauseOnHover`	`boolean`	No	`false`	-
`repeat`	`number`	No	`-`	Fixed number of content copies. By default the marquee measures itself and renders just enough copies to fill the container.
`reverse`	`boolean`	No	`false`	-
`speed`	`number`	No	`30`	Seconds for one full loop.