Marquee

Seamless infinite scroller — horizontal or vertical, reversible, pause on hover, faded edges. Pure CSS.

csszero-jsrsc2 files · 72 locdeps: clsx, tailwind-merge

NORTHWINDACMEGLOBEXINITECHUMBRELLAHOOLISTARKWAYNETYRELLCYBERDYNE

“Dropped the Fluid background into our launch page. Conversion went up and I didn’t touch three.js once.”

MMai @mai.codes

“The Command palette is the best ⌘K I’ve used outside of Linear.”

TTheo @theo_builds

“Finally a component library where the backgrounds are the main course.”

PPim @pimdesign

“Copy, paste, ship. Zero config, zero runtime deps. Bliss.”

AArun @arun.dev

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/marquee.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs marquee

import { Marquee } from "@/components/opus/effects/marquee";

<Marquee duration={30}>{logos}</Marquee>

Prop	Type	Default	Description
duration	number	30	Seconds per loop.
gap	string	"1rem"	Gap between items.
reverse / vertical	boolean	—	Direction and axis.
pauseOnHover	boolean	true	Pause while hovered.
fade	boolean	true	Mask the edges.
repeat	number	2	Copies of the content (raise for short lists on wide screens).