components / marquee

marquee.

infinite scrolling band, for a ticker or a row of pieces. speed is px/s and the duration is derived from the measured content width, so a short label and a long sentence travel at the same rate. the copy count is computed from the container width rather than hardcoded, so narrow content never leaves a hole. only the first copy is real to assistive tech and the keyboard (repeats are aria-hidden and inert), it pauses on hover and on focus-within so a link you tabbed to holds still, and under reduced motion it becomes a plain horizontal scroller of one copy so nothing past the edge is lost.

now building/
measure twicecut once

hover either band to hold it.

installation
bunx @justin06lee/chrome@latest add marquee
props
nametypedefaultdescription
children *ReactNode-
speednumber40px per second.
reversebooleanfalsescroll right instead of left.
gapnumber32gap between repeats, in px.
separatorReactNode-node rendered between repeats — a bullet, a slash, a stripe.
pauseOnHoverbooleantruehalt while the pointer is over the band, or anything inside it has focus.
fadebooleanfalsemask the left and right edges.
ariaLabelstring-accessible name (role="region") when the band carries content worth naming.
classNamestring-