text-blur
The blur family splits the element into characters and fades each one in while a CSS blur filter dissipates. The plain variant has no positional offset; directional variants add a soft 2rem × intensity drift on the named axis so characters drift into place behind the blur.
Add aa-color for an accent colour wave: as each character fades in it takes on the accent colour, holds it, then settles to the element’s base text colour — the accent lingers and the per-character stagger reads as a gradient wave. See Accent colour wave below.
Variants
Section titled “Variants”| Variant | Blur amount | Offset |
|---|---|---|
text-blur | 20px | none |
text-blur-up | 10px | translateY 2rem × intensity from below |
text-blur-down | 10px | translateY 2rem × intensity from above |
text-blur-left | 10px | translateX 2rem × intensity from the right |
text-blur-right | 10px | translateX 2rem × intensity from the left |
Attributes
Section titled “Attributes”| Attribute | Default | Notes |
|---|---|---|
aa-animate | (required) | One of the variants above. |
aa-split | chars | Override split mode (chars, words, lines). No line mask by default — add mask if you want one (see descender padding). |
aa-stagger | 0.02 | Seconds between parts. |
aa-duration | (init) | Seconds. Falls back to init({ duration }) (default 0.6). |
aa-delay | 0 | Seconds. |
aa-intensity | 1 | Multiplier on the 2rem translate offset. |
aa-ease | (init) | Any GSAP ease. Falls back to init({ ease }) (default power4.out). |
aa-scrub | (off) | true or seconds — bind progress to scroll. |
aa-color | (off) | Accent colour each character pulses through (accent → hold → base) as it fades in. Any CSS colour or a --custom-prop name. Enables the accent colour wave. |
Required GSAP plugins
Section titled “Required GSAP plugins”gsap, ScrollTrigger, SplitText.
Live demo
Section titled “Live demo”text-blurA short hero line
A two-line subhead that wraps onto a second line to show per-line behaviour.
A three-line paragraph of body copy so we can see how the animation reads at a longer scale, with several lines of text wrapping naturally across the page width.
aa-scrub="1")Tied to scroll.
Watch the easing.
Feel each beat.
text-blur-upA short hero line
A two-line subhead that wraps onto a second line to show per-line behaviour.
A three-line paragraph of body copy so we can see how the animation reads at a longer scale, with several lines of text wrapping naturally across the page width.
aa-scrub="1")Tied to scroll.
Watch the easing.
Feel each beat.
text-blur-downA short hero line
A two-line subhead that wraps onto a second line to show per-line behaviour.
A three-line paragraph of body copy so we can see how the animation reads at a longer scale, with several lines of text wrapping naturally across the page width.
aa-scrub="1")Tied to scroll.
Watch the easing.
Feel each beat.
text-blur-leftA short hero line
A two-line subhead that wraps onto a second line to show per-line behaviour.
A three-line paragraph of body copy so we can see how the animation reads at a longer scale, with several lines of text wrapping naturally across the page width.
aa-scrub="1")Tied to scroll.
Watch the easing.
Feel each beat.
text-blur-rightA short hero line
A two-line subhead that wraps onto a second line to show per-line behaviour.
A three-line paragraph of body copy so we can see how the animation reads at a longer scale, with several lines of text wrapping naturally across the page width.
aa-scrub="1")Tied to scroll.
Watch the easing.
Feel each beat.
Accent colour wave
Section titled “Accent colour wave”Adding aa-color gives each character a colour pulse on top of the usual blur fade: as it fades in it takes on the accent colour, holds it, then settles to the base. The pulse runs longer than the fade-in and lingers on the accent, so the per-character stagger trails the accent as a gradient wave — trailing characters still glowing while leading ones have resolved to the base. The base colour is automatic (the element’s own computed CSS color), and adding aa-scrub ties the wave to scroll position. The same attribute works on the fade family.
text-bluraa-color="#F84131"A short hero line
A two-line subhead that wraps onto a second line to show per-line behaviour.
A three-line paragraph of body copy so we can see how the animation reads at a longer scale, with several lines of text wrapping naturally across the page width.
aa-scrub="1")Tied to scroll.
Watch the easing.
Feel each beat.
text-blur-upaa-color="#5B8DEF"A short hero line
A two-line subhead that wraps onto a second line to show per-line behaviour.
A three-line paragraph of body copy so we can see how the animation reads at a longer scale, with several lines of text wrapping naturally across the page width.
aa-scrub="1")