Text Highlighter

TextHighlighter with smooth animated highlights to emphasize key text.

The best way to win is to
share

Installation

npx shadcn@latest add https://scrollxui.dev/registry/text-highlighter.json

import TextHighlighter from "@/components/ui/text-highlighter";

<TextHighlighter type="wavy" highlightColor="#00ffb7ff">
  <span>share</span>
</TextHighlighter>

Life is a journey full of
twists

TextHighlighter with smooth animated highlights to emphasize key text.

Property	Type	Default	Description
`children`	ReactNode	`required`	The text or elements to be highlighted.
`highlightColor`	string	`#ff6b9d`	Color of the highlight stroke applied under the text.
`highlightOpacity`	number	`1`	Opacity of the highlight stroke (0 to 1).
`animationDuration`	number	`1.2`	Duration of the highlight drawing animation in seconds.
`animationDelay`	number	`0`	Delay before the highlight animation starts (in seconds).
`strokeWidth`	number	`2`	Width of the highlight stroke.
`className`	string	`''`	Additional CSS classes for the wrapper span.
`style`	React.CSSProperties	`{}`	Inline styles applied to the wrapper span.
`type`	'wavy' \| 'zigzag'	`'wavy'`	Type of highlight path shape drawn beneath the text.
`triggerOnView`	boolean	`true`	If true, the animation triggers when the element enters the viewport.
`repeat`	boolean	`false`	If true, animation retriggers every time the element enters the viewport.