Skip to Content
ComponentsWord By Word

Word By Word

Mouse-tracked ripple effect applied to headline text.
(Scroll down to see the magic)

0px

Installation

pnpm dlx shadcn@latest add https://ui.perxel.com/r/word-by-word.json

Props

NameTypeDefault
textstring

The text content to animate. Supports multiple paragraphs separated by “\n\n”.

textExample
keywordsstring[]

List of keywords to highlight with special styles.

[]
scrollRangestring

Scroll distance that defines the total animation range.

"+=800"
startstring

Start position of the animation relative to the viewport.

"top 10%"
highlightRGBstring

RGB string for the temporary highlight background of each word.

"60, 60, 60"
debugboolean

Whether to show ScrollTrigger markers for debugging and tuning.

false
overlapWordsnumber

Number of words to overlap when revealing. Larger overlap = smoother wave effect.

30
progressTargetnumber

Percentage (0–1) of total scroll range used for word reveal animation.

0.7
textRevealThresholdnumber

Progress threshold (0–1) at which text opacity begins to reveal after background fades.

0.9
classNamestring

Additional class name(s) for the outer container element. Useful for control the sticky length.

undefined
Last updated on