Word By Word

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

0px

Henri Matisse (1869→1954) was a French artist known for his vibrant use of color and bold, expressive shapes. A leading figure of the Fauvism movement, Matisse's work broke away from traditional representation, using vivid hues to convey emotion rather than realism.

His art continues to inspire artists around the world today.

Installation

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

Props

Name	Type	Default
`text`	`string` The text content to animate. Supports multiple paragraphs separated by “\n\n”.	`textExample`
`keywords`	`string[]` List of keywords to highlight with special styles.	`[]`
`scrollRange`	`string` Scroll distance that defines the total animation range.	`"+=800"`
`start`	`string` Start position of the animation relative to the viewport.	`"top 10%"`
`highlightRGB`	`string` RGB string for the temporary highlight background of each word.	`"60, 60, 60"`
`debug`	`boolean` Whether to show ScrollTrigger markers for debugging and tuning.	`false`
`overlapWords`	`number` Number of words to overlap when revealing. Larger overlap = smoother wave effect.	`30`
`progressTarget`	`number` Percentage (0–1) of total scroll range used for word reveal animation.	`0.7`
`textRevealThreshold`	`number` Progress threshold (0–1) at which text opacity begins to reveal after background fades.	`0.9`
`className`	`string` Additional class name(s) for the outer container element. Useful for control the sticky length.	`undefined`