Gooey Blur Text Reveal
What it does
Line-by-line text reveal that reads like ink pooling into letters: each line is split with SplitText and wrapped in an inner span that starts at a large em-based blur and animates to sharp, while the outer line carries an SVG feColorMatrix alpha-threshold filter that hardens the soft edges into a gooey mass. Three modes per block (on load, once on scroll, scrubbed), Lenis smooth scroll, and banner photos that settle from a slight zoom as they pass.
How it's built
| Category | text |
|---|---|
| Tech | gsap, lenis |
| GSAP plugins | SplitText, ScrollTrigger |
| Complexity | page |
| Performance cost | medium |
| Mobile-safe | yes |
| Scroll | hijacks scrolling |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Gooey Blur Text Reveal — SplitText Lines Sharpening Under an Alpha-Threshold SVG Filter
## Goal
Build a long editorial page (hero → banner photo → two paragraphs → banner → five-line index → banner → paragraph → banner → outro) where every heading and paragraph **materialises line by line out of a soft blob**. Each line is wrapped in an inner span that starts at a **large blur (0.35em)** and animates to sharp; the outer line carries an **SVG `feColorMatrix` alpha-threshold filter**, which hardens the blurred alpha into a solid, gooey mass — so instead of a fade the letters *pool* into shape, like ink. Three trigger modes per block: **on load** (with delay), **once on scroll** (enter the viewport), and **scrubbed** (tied to scroll between two points). Banner photos settle from a slight zoom as they pass. GSAP SplitText + ScrollTrigger, Lenis smooth scroll.
## Tech
Vanilla HTML/CSS/JS with ES module imports. `gsap` (npm) with **`SplitText`** and **`ScrollTrigger`**, plus **`lenis`**. Fonts: **Anton** (headings), **DM Sans** (base).
## Layout / HTML
```html
<div class="gb">
<svg class="gb-filter" aria-hidden="true"><defs>
<filter id="gb-goo" x="-50%" y="-50%" width="200%" height="200%">
<feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 255 -140" />
</filter>
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in