Preferences

Blur Text

BLUR TEXT

Customize

Text

Duration (s)0.8

Char Delay (s)0.06

Word Delay (s)0.15

Scale4

Blur (px)8

Y Offset (px)0

Props

Property	Type	Default	Description
`text`	string	`"BLUR TEXT"`	Display text to animate.
`animateBy`	string	`"letter"`	Animate character-by-character or word-by-word: "letter" \| "word".
`from`	string	`"center"`	Stagger origin for reveal: "center" \| "start" \| "end" \| "random".
`charDelay`	number	`0.06`	Stagger delay (s) between each character entrance (used when animateBy="letter").
`wordDelay`	number	`0.15`	Stagger delay (s) between each word entrance (used when animateBy="word").
`scale`	number	`4`	Initial scale of each token before it animates in.
`blur`	number	`8`	Initial blur amount (px) applied to each token before it animates in.
`yOffset`	number	`0`	Initial Y offset (px) — tokens travel upward into position. 0 disables vertical movement.
`duration`	number	`0.8`	Duration (s) of the animation for each character or word.
`repeat`	boolean	`false`	Loop the explode animation indefinitely.
`color`	string	`"#d35af8"`	CSS color value for the text, e.g. "#fff" or "crimson". Ignored when gradient is set.
`gradient`	string	`""`	CSS gradient string applied as a text gradient, e.g. "linear-gradient(90deg,#f97316,#ec4899)". Overrides color when set.
`fontSize`	string	`"text-6xl"`	Tailwind font-size class, e.g. "text-4xl" \| "text-6xl" \| "text-9xl".
`className`	string	`""`	Extra classes applied to the root wrapper div.

textstring

Display text to animate.

Default"BLUR TEXT"

animateBystring

Animate character-by-character or word-by-word: "letter" | "word".

Default"letter"

fromstring

Stagger origin for reveal: "center" | "start" | "end" | "random".

Default"center"

charDelaynumber

Stagger delay (s) between each character entrance (used when animateBy="letter").

Default0.06

wordDelaynumber

Stagger delay (s) between each word entrance (used when animateBy="word").

Default0.15

scalenumber

Initial scale of each token before it animates in.

Default4

blurnumber

Initial blur amount (px) applied to each token before it animates in.

Default8

yOffsetnumber

Initial Y offset (px) — tokens travel upward into position. 0 disables vertical movement.

Default0

durationnumber

Duration (s) of the animation for each character or word.

Default0.8

repeatboolean

Loop the explode animation indefinitely.

Defaultfalse

colorstring

CSS color value for the text, e.g. "#fff" or "crimson". Ignored when gradient is set.

Default"#d35af8"

gradientstring

CSS gradient string applied as a text gradient, e.g. "linear-gradient(90deg,#f97316,#ec4899)". Overrides color when set.

Default""

fontSizestring

Tailwind font-size class, e.g. "text-4xl" | "text-6xl" | "text-9xl".

Default"text-6xl"

classNamestring

Extra classes applied to the root wrapper div.

Default""

Dependencies

gsap 3.15.0

Crafted withbyMohammad Tasin