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 marqueeprops
| name | type | default | description |
|---|---|---|---|
| children * | ReactNode | - | |
| speed | number | 40 | px per second. |
| reverse | boolean | false | scroll right instead of left. |
| gap | number | 32 | gap between repeats, in px. |
| separator | ReactNode | - | node rendered between repeats — a bullet, a slash, a stripe. |
| pauseOnHover | boolean | true | halt while the pointer is over the band, or anything inside it has focus. |
| fade | boolean | false | mask the left and right edges. |
| ariaLabel | string | - | accessible name (role="region") when the band carries content worth naming. |
| className | string | - |