Velora UI

Marquee

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

  • 0.9 KB gzipped
  • Zero dependencies
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0

Preview

AstroNext.jsRemixViteNuxtSvelteKit

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/marquee.json

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

Props

PropTypeDefault
reverse

Reverse the scroll direction

booleanfalse
pauseOnHover

Pause the animation while hovered (it always pauses while focus is inside)

booleanfalse
vertical

Scroll vertically instead of horizontally

booleanfalse
repeat

Number of content copies (keep >=2 for a seamless loop)

number4
fade

Fade the edges with a mask

booleantrue
children*React.ReactNode—

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

Accessibility

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.