Scroll velocity marquee

Use it for

• A brand or collection strip between two sections
• Listing names or perks where reading every word is not required

Avoid

• Content people must read or click, since it never stops moving
• Pages that already have a lot of motion

How it works

A requestAnimationFrame loop reads the container scrollTop each frame and turns the change into a velocity in px per second, smoothed with linear interpolation so it rises quickly and decays. Each row moves at a base speed plus a boost from that velocity, in opposite directions, and skews by a few degrees in the scroll direction. Each track holds two identical copies and the offset wraps at half its width, so the loop is seamless. The loop only runs while the demo is in view.

Accessibility

Reduced motion stops the loop and shows the rows still. The duplicate copy is aria-hidden so screen readers hear each item once. Nothing in the marquee is interactive.