components / marquee
marquee.
infinite scrolling ticker band. 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. static under reduced motion.
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 | |
| fade | boolean | false | mask the left and right edges. |
| className | string | - |