Menu
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. |
textTypestring
Default
"BLUR TEXT"Display text to animate.
animateByTypestring
Default
"letter"Animate character-by-character or word-by-word: "letter" | "word".
fromTypestring
Default
"center"Stagger origin for reveal: "center" | "start" | "end" | "random".
charDelayTypenumber
Default
0.06Stagger delay (s) between each character entrance (used when animateBy="letter").
wordDelayTypenumber
Default
0.15Stagger delay (s) between each word entrance (used when animateBy="word").
scaleTypenumber
Default
4Initial scale of each token before it animates in.
blurTypenumber
Default
8Initial blur amount (px) applied to each token before it animates in.
yOffsetTypenumber
Default
0Initial Y offset (px) — tokens travel upward into position. 0 disables vertical movement.
durationTypenumber
Default
0.8Duration (s) of the animation for each character or word.
repeatTypeboolean
Default
falseLoop the explode animation indefinitely.
colorTypestring
Default
"#d35af8"CSS color value for the text, e.g. "#fff" or "crimson". Ignored when gradient is set.
gradientTypestring
Default
""CSS gradient string applied as a text gradient, e.g. "linear-gradient(90deg,#f97316,#ec4899)". Overrides color when set.
fontSizeTypestring
Default
"text-6xl"Tailwind font-size class, e.g. "text-4xl" | "text-6xl" | "text-9xl".
classNameTypestring
Default
""Extra classes applied to the root wrapper div.
Dependencies
gsap 3.15.0
Crafted withbyMohammad Tasin