ReactBits

ScrollVelocity

Horizontal text marquee that reacts to scroll velocity. Text direction reverses when scrolling up. Powered by Motion.

Default (velocity=100)

SCROLL VELOCITY SCROLL VELOCITY SCROLL VELOCITY SCROLL VELOCITY SCROLL VELOCITY SCROLL VELOCITY

REACT BITS REACT BITS REACT BITS REACT BITS REACT BITS REACT BITS

velocity=100numCopies=6

SPEED SPEED SPEED SPEED SPEED SPEED

MOTION MOTION MOTION MOTION MOTION MOTION

VELOCITY VELOCITY VELOCITY VELOCITY VELOCITY VELOCITY

velocity=3003 text rows (alternating direction)

BEIRUX DIGITAL AGENCY BEIRUX DIGITAL AGENCY BEIRUX DIGITAL AGENCY BEIRUX DIGITAL AGENCY BEIRUX DIGITAL AGENCY BEIRUX DIGITAL AGENCY

DESIGN + ENGINEERING DESIGN + ENGINEERING DESIGN + ENGINEERING DESIGN + ENGINEERING DESIGN + ENGINEERING DESIGN + ENGINEERING

velocity=40damping=80stiffness=200

Prop	Type	Default	Description
texts	ReactNode[]	[]	Array of text/nodes; each becomes a row, alternating direction
velocity	number	100	Base scroll speed in px/s (even rows move opposite)
className	string	""	Classes applied to each text span copy
damping	number	50	Spring damping for velocity smoothing
stiffness	number	400	Spring stiffness for velocity smoothing
numCopies	number	6	How many copies of the text to render (seamless loop)
velocityMapping	{ input: [n,n], output: [n,n] }	{ input: [0,1000], output: [0,5] }	Maps scroll velocity to speed multiplier
scrollContainerRef	RefObject<HTMLElement>	undefined	Custom scroll container (defaults to window)
parallaxClassName	string	undefined	Class for the outer overflow container
scrollerClassName	string	undefined	Class for the inner motion div
parallaxStyle	CSSProperties	undefined	Inline styles for outer container
scrollerStyle	CSSProperties	undefined	Inline styles for inner motion div