Marquee

Effects

A measured moving list with optional perspective and a rhythm that follows scrolling.

React · copy into your project · light and dark themes

Try it

Variant

Direction

Pace

Ideas to carry with you

Paused

Make something useful
Ideas into everyday tools
Leave room to explore
Small experiments welcome
Share what you learn
A good idea travels
Find your own rhythm
Steady is a good speed

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/marquee.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes button, label, native-select, shape, scroll-area, slider, typography. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/marquee.json https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/label.json https://luv-jeri.github.io/cojeev-ui/r/native-select.json https://luv-jeri.github.io/cojeev-ui/r/shape.json https://luv-jeri.github.io/cojeev-ui/r/scroll-area.json https://luv-jeri.github.io/cojeev-ui/r/slider.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using marquee

Use decorative text, shapes or non-interactive cards as children. The list is measured after fonts, content and viewport changes; its visual copy has no duplicate IDs or mounted React effects.
Choose a named speed or set pixelsPerSecond (0–160). direction is left or right. Changes of pace and scroll direction preserve the current position.
presentation=depth adds bounded perspective and distance-based focus. Adjust tiltX, tiltY, perspective and depth. Quiet settings restore flat, fully legible content.
respondToScroll follows the document by default. Pass scrollTarget to follow a mounted native scroll viewport instead. Pair two rows with opposite direction values for a counter-moving composition.
Pause keeps the current position. Hover and focus pause automatic motion. Children with real links, buttons or fields are displayed as a static original list so all actions remain usable.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

MarqueeProps

Prop	Type	Required
`direction`	`MarqueeDirection`	No
`speed`	`MarqueeSpeed`	No
`pixelsPerSecond` Override the named pace with 0–160 CSS pixels per second.	`number`	No
`respondToScroll`	`boolean`	No
`scrollTarget` Omit to follow document scrolling. The target should be mounted with the marquee.	`React.RefObject<HTMLElement \| null>`	No
`presentation`	`"flat" \| "depth"`	No
`tiltX` Depth presentation only. Perspective also scales to the viewport to keep the strip continuous.	`number`	No
`tiltY`	`number`	No
`perspective`	`number`	No
`depth`	`number`	No
`label`	`string`	No
`paused`	`boolean`	No
`defaultPaused`	`boolean`	No
`onPausedChange`	`(paused: boolean) => void`	No

Accessibility

One semantic list is exposed to assistive technology. Its decorative copy is inert and hidden.
Reduced motion, local and shared quiet preferences disable movement. Hidden and offscreen rows stop work. Automatic motion has an explicit pause control.
Use normal typography for important reading. Depth and outlined text are expressive options for short, non-essential phrases.

States and appearance

runningpausedstaticfocusedscroll-responsivereversinginteractive-list

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.