Marquee scrolls its content sideways in a loop. The motion is a CSS animation: the content and a copy of it move by their own width, so the loop is seamless, and the duration comes from the measured width and speed. The copies are hidden from assistive tech and can’t take focus.

With reduced motion turned on in the system, the marquee stands still and its content scrolls by hand in a ScrollArea when it overflows.

#Demos

#Basic

Put any content in. Give it some space at the end (here padding-inline-end) so it doesn’t run into itself when it comes round.

#Auto fill

autoFill repeats short content until it fills the width, so there is no blank before it comes round again.

#Speed

speed is in px per second, so the same speed reads the same whatever the content’s width.

#Direction

#Pause on hover

pauseOnHover stops the marquee while the pointer is over it or focus is inside it, so people can read it or use a link in it.

#Marquee Props

Elegant fades the content out at the edges (--r-marquee-fade-width); Brutal cuts it off hard.