Preferences

Blur Highlight

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Customize

Text

Highlighted Phrases (comma separated)

Reveal Duration (s)0.6

Reveal Delay (s)0

Stagger Amount (s)0.7

Viewport Amount1

Root Margin

Props

Property	Type	Default	Description
`text`	string	`"Our cutting-edge technology..."`	Display text to animate (passed as children in JSX).
`mode`	string	`"wipe"`	Animation style: "wipe" \| "slide" \| "curtain" \| "blinds" \| "fade" \| "highlight".
`direction`	string	`"left"`	Direction the mask exits or the highlight pill grows from: "left" \| "right" \| "top" \| "bottom".
`method`	string	`"word"`	Split granularity for non-highlight modes: "word" (each word masked separately) or "whole" (single mask for the full text).
`highlightedBits`	string[]	`[]`	Only used when mode="highlight". Exact phrases to wrap in an animated rounded pill.
`revealDuration`	number	`0.6`	Duration (s) of each chunk/pill reveal animation.
`revealDelay`	number	`0`	Delay (s) before the reveal animation starts.
`staggerAmount`	number	`auto (0.4–0.7)`	Total time (s) spread across all chunks/pills; leave unset for automatic stagger based on chunk count.
`ease`	string	`"circ.inOut"`	GSAP ease string, e.g. "circ.inOut", "power2.out", "back.out(1.7)".
`maskColor`	string	`"#49A078"`	CSS color for the mask / highlight pill, e.g. "#7C3AED" or "crimson".
`textColor`	string	`"inherit"`	CSS color applied to the revealed text.
`as`	string	`"p"`	HTML tag to render: "h1" \| "h2" \| "h3" \| "p" \| "span".
`once`	boolean	`true`	If true, animates only the first time it enters the viewport. If false, resets and re-animates every time (highlight mode only).
`amount`	number	`1`	Fraction of the element that must be visible (0–1) before the animation triggers.
`rootMargin`	string	`"0px 0px -120px 0px"`	IntersectionObserver root margin, shifts when the trigger point fires relative to the viewport edge.
`className`	string	`""`	Extra classes applied to the root wrapper element.

textstring

Display text to animate (passed as children in JSX).

Default"Our cutting-edge technology..."

modestring

Default"wipe"

directionstring

Direction the mask exits or the highlight pill grows from: "left" | "right" | "top" | "bottom".

Default"left"

methodstring

Split granularity for non-highlight modes: "word" (each word masked separately) or "whole" (single mask for the full text).

Default"word"

highlightedBitsstring[]

Only used when mode="highlight". Exact phrases to wrap in an animated rounded pill.

Default[]

revealDurationnumber

Duration (s) of each chunk/pill reveal animation.

Default0.6

revealDelaynumber

Delay (s) before the reveal animation starts.

Default0

staggerAmountnumber

Total time (s) spread across all chunks/pills; leave unset for automatic stagger based on chunk count.

Defaultauto (0.4–0.7)

easestring

GSAP ease string, e.g. "circ.inOut", "power2.out", "back.out(1.7)".

Default"circ.inOut"

maskColorstring

CSS color for the mask / highlight pill, e.g. "#7C3AED" or "crimson".

Default"#49A078"

textColorstring

CSS color applied to the revealed text.

Default"inherit"

asstring

HTML tag to render: "h1" | "h2" | "h3" | "p" | "span".

Default"p"

onceboolean

If true, animates only the first time it enters the viewport. If false, resets and re-animates every time (highlight mode only).

Defaulttrue

amountnumber

Fraction of the element that must be visible (0–1) before the animation triggers.

Default1

rootMarginstring

IntersectionObserver root margin, shifts when the trigger point fires relative to the viewport edge.

Default"0px 0px -120px 0px"

classNamestring

Extra classes applied to the root wrapper element.

Default""

Dependencies

gsap 3.12.5

Crafted withbyMohammad Tasin