A band of items that slides forever — at a speed in pixels per second, paused by the pointer, the focus or its own pause button, read once by assistive technology, and a still row you scroll under reduced motion.

WebBetaData display

Web only — React, from @krizaka/ui/marquee. Beta: its API may still change in a minor version.

When to use

A band of logos, names or short quotes on a landing page: proof at a glance.
Short cards that need no comparison (testimonials, recent payouts) — one band per page.

When not to use

For content the reader must read in order or act on: a list stays still.
For a few items that fit on one line: show them, still.

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Marquee } from "@krizaka/ui/marquee";

Examples

A band of names

Paused by the pointer, the focus or its button; a still row under reduced motion.

Postgres
Ollama
Spring
Kafka
Keycloak
Qdrant
MinIO
Grafana

Testimonials

Cards sliding the other way, slower; each one read once.

“My supporters see exactly where their tip goes.”
Maya, illustrator
“I sold a cut to the highest bidder, live.”
Eric, filmmaker
“90 % to me — and it shows on every payout.”
Sam, musician

Props

A band of items sliding forever — pausable, accessible, still under reduced motion.

Prop	Type	Default	Description
`children`required	`ReactNode`	—	The items: logos, words, cards.
`label`required	`string`	—	The accessible name of the band (“Our partners”) — passed translated.
`pauseLabel`required	`string`	—	The pause button's name (“Pause the band”) — passed translated.
`playLabel`required	`string`	—	The same button's name once paused (“Play the band”) — passed translated.
`defaultPaused`	`boolean`	`false`	Starts paused.
`direction`	`"right" \| "left"`	`left`	Which way it slides.
`fade`	`boolean`	`true`	The edges fade into the page.
`speed`	`number`	`40`	Pixels per second.

Accessibility

A section named by label; the items are a list, and the second copy (for the loop) is hidden from assistive technology.
The pause button (aria-pressed) meets WCAG 2.2.2: motion that lasts can be stopped.
Under prefers-reduced-motion the band is still, its copy removed, and it scrolls by hand; off screen it pauses (MotionObserver).

Keyboard

Keys	Action
`Tab`	Focuses the band (it pauses; under reduced motion the arrows scroll it), the links inside, then the pause button.
`Enter / Space`	On the pause button: stops or restarts the band.

Best practices

Keep it slow (24–40 px/s) and short; one band per page.
Items that make sense alone: the reader catches them in any order.
Pass label, pauseLabel and playLabel translated: the band is a named region with a real pause button.

Generated from the code of @krizaka/ui 2.3.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

Marquee