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

Tweak the props live

Highlight

Highlight Direction

Highlight Color (Light)

#FF9FFC

Highlight Color (Dark)

#7C3AED

Highlight Delay0.4s

Highlight Duration1s

Blur

Blur Amount8px

Inactive Opacity0.3

Blur Delay0s

Blur Duration0.8s

Viewport

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

Default:8

inactiveOpacitynumber

Opacity when not in view

Default:0.3

blurDelaynumber

Blur animation delay in seconds

Default:0

blurDurationnumber

Blur animation duration in seconds

Default:0.8

highlightDelaynumber

Highlight animation delay in seconds

Default:0.4

highlightDurationnumber

Highlight animation duration in seconds

Default:1

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