Blur Highlight

A paragraph that blurs in and highlights key phrases

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""

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