Blur Highlight

Animated paragraph with blur-in effect and automatic text highlighting

blur-highlight-tw

Our cutting-edge technology transforms how businesses analyze data and make decisions. From real-time insights to predictive analytics, we deliver solutions that drive growth and innovation.

Customize

Highlight Color (Light)

Highlight Color (Dark)

Highlight Delay

0.4s

Highlight Duration

1.0s

Blur Amount

8px

Inactive Opacity

0.3

Blur Delay

0.0s

Blur Duration

0.8s

Animate Once

Props

Name	Type	Default	Description
`children`	React.ReactNode	`-`	Text content to display
`highlightedBits`	(string \| HighlightBit)[]	`[]`	Array of text strings or objects to highlight. Use string for all occurrences, or { text: string, occurrence: number } for specific ones.
`highlightColor`	string	`"hsl(80, 100%, 50%)"`	Color for highlighted text (any CSS color)
`highlightClassName`	string	`""`	Additional class name for highlighted text elements
`blurAmount`	number	`8`	Initial blur amount in pixels
`inactiveOpacity`	number	`0.3`	Opacity when not in view
`blurDelay`	number	`0`	Blur animation delay in seconds
`blurDuration`	number	`0.8`	Blur animation duration in seconds
`highlightDelay`	number	`0.4`	Highlight animation delay in seconds
`highlightDuration`	number	`1`	Highlight animation duration in seconds
`highlightDirection`	"left" \| "right" \| "top" \| "bottom"	`"left"`	Direction of highlight animation
`viewportOptions`	{ once?: boolean; amount?: number }	`{ once: false, amount: 0.5 }`	Viewport intersection observer options (margin is fixed at -20%)
`className`	string	`""`	Additional CSS classes

childrenReact.ReactNode

Text content to display

Default-

highlightedBits(string | HighlightBit)[]

Array of text strings or objects to highlight. Use string for all occurrences, or { text: string, occurrence: number } for specific ones.

Default[]

highlightColorstring

Color for highlighted text (any CSS color)

Default"hsl(80, 100%, 50%)"

highlightClassNamestring

Additional class name for highlighted text elements

Default""

blurAmountnumber

Initial blur amount in pixels

Default8

inactiveOpacitynumber

Opacity when not in view

Default0.3

blurDelaynumber

Blur animation delay in seconds

Default0

blurDurationnumber

Blur animation duration in seconds

Default0.8

highlightDelaynumber

Highlight animation delay in seconds

Default0.4

highlightDurationnumber

Highlight animation duration in seconds

Default1

highlightDirection"left" | "right" | "top" | "bottom"

Direction of highlight animation

Default"left"

viewportOptions{ once?: boolean; amount?: number }

Viewport intersection observer options (margin is fixed at -20%)

Default{ once: false, amount: 0.5 }

classNamestring

Additional CSS classes

Default""