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.

WebBêtaAffichage de données

Web uniquement — React, depuis @krizaka/ui/marquee. Bêta : son API peut encore changer à une version mineure.

Quand l’utiliser

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.

Quand ne pas l’utiliser

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

Installer

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

Styles

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

Importer

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

Exemples

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	Défaut	Description
`children`requis	`ReactNode`	—	The items: logos, words, cards.
`label`requis	`string`	—	The accessible name of the band (“Our partners”) — passed translated.
`pauseLabel`requis	`string`	—	The pause button's name (“Pause the band”) — passed translated.
`playLabel`requis	`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.

Accessibilité

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).

Clavier

Touches	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.

Bonnes pratiques

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.

Générée depuis le code de @krizaka/ui 2.3.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Marquee