ScrollVelocity
scroll-velocityMoves repeated text horizontally according to scroll speed and direction.
Usage
Basic usage
A single-line text marquee that drifts at a constant speed when stationary and accelerates/changes direction with the scrolling speed of the page.
Hulian component library Hulian component library Hulian component library Hulian component library Hulian component library Hulian component library
tsx
<ScrollVelocity texts={["Hulian Component Library"]} velocity={80} />Double row alternating direction
texts When there are multiple lines, the even-numbered lines are to the left and the odd-numbered lines are to the right, resulting in parallax misalignment.
Enterprise level · High quality Enterprise level · High quality Enterprise level · High quality Enterprise level · High quality Enterprise level · High quality Enterprise level · High quality
Native adaptation · Theme awareness Native adaptation · Theme awareness Native adaptation · Theme awareness Native adaptation · Theme awareness Native adaptation · Theme awareness Native adaptation · Theme awareness
tsx
<ScrollVelocity
texts={["Enterprise level · High quality", "Native adaptation · Theme awareness"]}
velocity={70}
/>Highlight main color + fast
Increase velocity to speed up the drift; className sets the text to the primary color.
SCROLL VELOCITY SCROLL VELOCITY SCROLL VELOCITY SCROLL VELOCITY SCROLL VELOCITY SCROLL VELOCITY
tsx
<ScrollVelocity
texts={["SCROLL VELOCITY"]}
velocity={140}
className="text-primary"
/>Weaken the text color
Use text-muted to weaken the text color, slow down the speed, and use it as atmospheric background text.
Continuous scrolling atmosphere background text Continuous scrolling atmosphere background text Continuous scrolling atmosphere background text Continuous scrolling atmosphere background text Continuous scrolling atmosphere background text Continuous scrolling atmosphere background text
tsx
<ScrollVelocity
texts={["Continuous scrolling atmosphere background text"]}
velocity={50}
className="text-muted"
/>When to use
Use ScrollVelocity for horizontal multiline marquees whose alternating rows accelerate with page scroll velocity. Use CurvedLoop for a single marquee following a curved path; ScrollVelocity specializes in straight ticker rows with scroll-reactive speed and direction.
Import
ts
import { ScrollVelocity } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| texts | string[] | [] | Multi-line scrolling text, each line has an independent ticker; even lines move to the left/odd lines move to the right to create parallax |
| velocity | number | 100 (showcase 80) | Base speed in px/s. Rows drift even when the page is still; negative values reverse all directions. |
| damping | number | 50 | Spring damping for velocity changes; higher values respond more slowly and steadily. |
| stiffness | number | 400 | Spring stiffness; higher values follow scroll velocity more tightly. |
| numCopies | number | 6 | Copies per row for seamless looping; shorter text requires more copies. |
| velocityMapping | { input: [number, number]; output: [number, number] } | { input: [0,1000], output: [0,5] } | Scroll speed → acceleration factor mapping (clamp:false allows extrapolation) |
| scrollContainerRef | RefObject<HTMLElement | null> | window | Custom scroll container; do not pass monitoring window scrolling |
| className | string | — | Transparently transmit the className (font size/color/weight) of each line of text span |
| containerClassName | string | — | Transparently transmit the className of the root section |
| parallaxStyle | CSSProperties | — | Transparently transmit the inline style of the outer (parallax) container of each row |
| scrollerStyle | CSSProperties | — | Transparently transmit the scroll rail (scroller) inline style of each row |
Example
tsx
// Single row uniform drift
<ScrollVelocity texts={["HulianUI component library"]} velocity={80} />
// Two rows alternating directions (parallax)
<ScrollVelocity texts={["Enterprise-ready · high quality", "Responsive · theme-aware"]} velocity={70} />Usage guidelines
- Shorter text needs a larger
numCopies; too few copies expose gaps wider than the viewport. classNamestyles each row's text, whilecontainerClassNamestyles the root. Keep the two scopes distinct.- Window scrolling is monitored by default. Pass
scrollContainerRefinside a custom scroll area or the velocity sensor will observe the wrong source. - Reduced-motion mode disables scroll acceleration but retains constant drift and the same readable DOM.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
HULIAN HULIAN HULIAN HULIAN HULIAN HULIAN
<ScrollVelocity
texts={["HULIAN"]}
velocity={80}
damping={50}
stiffness={400}
numCopies={6}
/>