Scroll down and the band speeds up and leans into the direction of travel; scroll up and it reverses. Left alone, it keeps drifting at a gentle base speed.
The loop is seamless — it wraps on the measured width of one repeat of your text, not on a percentage, so nothing jumps when you change the copy or the font. The number of repeats is worked out from the block's width automatically.
Adjustable: text, separator, base speed, scroll sensitivity, maximum lean, direction, rule lines, edge fade.
DOM and requestAnimationFrame, no dependencies, nothing loaded from outside. Honours prefers-reduced-motion, and freezes on a still frame inside the Framer canvas. Free.
Scroll down and the band speeds up and leans into the direction of travel; scroll up and it reverses. Left alone, it keeps drifting at a gentle base speed.
The loop is seamless — it wraps on the measured width of one repeat of your text, not on a percentage, so nothing jumps when you change the copy or the font. The number of repeats is worked out from the block's width automatically.
Adjustable: text, separator, base speed, scroll sensitivity, maximum lean, direction, rule lines, edge fade.
DOM and requestAnimationFrame, no dependencies, nothing loaded from outside. Honours prefers-reduced-motion, and freezes on a still frame inside the Framer canvas. Free.
