Scroll Velocity

Text marquee animation where speed and distortion scale with the user's scroll velocity.

Default

Scroll the page to speed the rows up. Every prop is wired to the controls underneath.

UI Library UI Library UI Library UI Library UI Library UI Library

Scroll Down Scroll Down Scroll Down Scroll Down Scroll Down Scroll Down

Velocity100

Num Copies6

Damping50

Stiffness400

Prop	Type	Default	Description
`scrollContainerRef`	`Ref<HTMLElement>`	`undefined`	Optional ref for a custom scroll container to track scroll position.
`texts`	`string[]`	`[]`	Array of strings to display as scrolling rows.
`velocity`	`number`	`100`	Base velocity for scrolling; sign is flipped for odd indexed texts.
`className`	`string`	`""`	CSS class applied to each text copy (span).
`damping`	`number`	`50`	Damping value for the spring animation.
`stiffness`	`number`	`400`	Stiffness value for the spring animation.
`numCopies`	`number`	`6`	Number of copies of the text rendered for a continuous scrolling effect.
`velocityMapping`	`{ input: number[]; output: number[] }`	`{ input: [0, 1000], output: [0, 5] }`	Mapping from scroll velocity to a movement multiplier for dynamic scrolling.
`parallaxClassName`	`string`	`"parallax"`	CSS class for the parallax container.
`scrollerClassName`	`string`	`"scroller"`	CSS class for the scroller container.
`parallaxStyle`	`CSSProperties`	`undefined`	Inline styles for the parallax container.
`scrollerStyle`	`CSSProperties`	`undefined`	Inline styles for the scroller container.

Keyboard shortcuts and ARIA behavior.

The text is repeated numCopies times, so screen readers read it several times. Mark the row aria-hidden and give the section a label if that is noisy.
The marquee moves continuously. Provide a way to stop it for users who prefer reduced motion.