Marquee

Seamless scrolling loop — horizontal, vertical, hover-pause.

AstroNext.jsRemixViteNuxtSvelteKit

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/marquee.json

Adds components/velora/marquee.tsx and merges the keyframes and tokens into your CSS.

Prop	Type	Default
`reverse` Reverse the scroll direction	`boolean`	`false`
`pauseOnHover` Pause the animation while hovered (it always pauses while focus is inside)	`boolean`	`false`
`vertical` Scroll vertically instead of horizontally	`boolean`	`false`
`repeat` Number of content copies (keep >=2 for a seamless loop)	`number`	`4`
`fade` Fade the edges with a mask	`boolean`	`true`
`children*`	`React.ReactNode`	`—`

Also accepts every <div> attribute, forwarded to the root element.

Reduced motion: Scrolling stops and only the first copy is shown, without the edge fade; horizontal items wrap onto extra rows and a vertical marquee becomes scrollable, so no item is clipped out of reach.
Keyboard: The marquee itself is not focusable; scrolling pauses while focus is inside it (and on hover with pauseOnHover), and the duplicate copies are inert, so Tab only visits the first copy's links or buttons.
Screen readers: The content is read once; copies 2 and up are aria-hidden.

Seamless scrolling loop — horizontal, vertical, hover-pause.

AstroNext.jsRemixViteNuxtSvelteKit

pnpm dlx shadcn@latest add https://paulkeys.org/r/marquee.json

Adds components/velora/marquee.tsx and merges the keyframes and tokens into your CSS.

Prop	Type	Default
`reverse` Reverse the scroll direction	`boolean`	`false`
`pauseOnHover` Pause the animation while hovered (it always pauses while focus is inside)	`boolean`	`false`
`vertical` Scroll vertically instead of horizontally	`boolean`	`false`
`repeat` Number of content copies (keep >=2 for a seamless loop)	`number`	`4`
`fade` Fade the edges with a mask	`boolean`	`true`
`children*`	`React.ReactNode`	`—`

Also accepts every <div> attribute, forwarded to the root element.

Reduced motion: Scrolling stops and only the first copy is shown, without the edge fade; horizontal items wrap onto extra rows and a vertical marquee becomes scrollable, so no item is clipped out of reach.
Keyboard: The marquee itself is not focusable; scrolling pauses while focus is inside it (and on hover with pauseOnHover), and the duplicate copies are inert, so Tab only visits the first copy's links or buttons.
Screen readers: The content is read once; copies 2 and up are aria-hidden.