Marquee

A loop of logos, chips or cards that runs on a CSS animation, so it keeps its pace while the page is busy.

Examples

Wordmarks

Larkspur

Oakbridge

Sundial

Kestrel

Copperleaf

Pinecrest

Marrow & Co

Two rows in opposite directions

Design tokensKeyboard firstDark modeEmpty statesRelease notesOnboardingCommand menu

AccessibilityMotionData tablesDate pickersFormsNotificationsCharts

Vertical

2.4.0Boards remember the last filter you used

2.3.2Export a sprint as a CSV from its menu

2.3.0Press G then B to jump to your boards

2.2.1Due dates follow your time zone

2.2.0Archive a project without losing its history

2.1.0Mentions notify people who follow the task

Installation

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-marquee.json

Component API

Marquee

Prop	Type	Default	Description
children	React.ReactNode		The items of one loop.
direction	'horizontal' \| 'vertical'	'horizontal'	The axis of the loop. A vertical marquee needs a height.
reverse	boolean	false	Runs the loop the other way.
pauseOnHover	boolean	true	Pauses under the pointer and while an item inside has focus.
gap	number	16	The space between items, in pixels.
duration	number		Seconds for one loop. Without it, the theme default applies: 40 seconds across, 60 down.
repeat	number	2	Copies of the items in each half of the loop. Raise it when one copy is narrower than the container.
fade	boolean	true	Fades the items out at both edges.
className	string		Optional CSS class for the container.

Only the first copy is read by screen readers and reached with the keyboard; the copies are hidden from both. Under reduced motion the loop stops: a horizontal marquee shows one copy, wrapped and centred, and a vertical one shows its first items.

Marquees are ambient motion: keep them on marketing pages, never inside the application.

Compared with Infinite Slider

Infinite Slider moves its row from JavaScript, measures it, and can slow down smoothly under the pointer with speedOnHover. Marquee hands the loop to the browser, so it stays smooth when the page is busy, and it pauses under the pointer. Prefer Marquee for a constant loop and Infinite Slider when the speed has to change.

Credits

The effect is inspired by the marquee of UI Layouts.