Text effect

Gooey Blur Text Reveal

by Vanguardia · motionprompts.dev

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.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 1.5–1.5s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power3
Complexity: 3/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, SplitText, ScrollTrigger, lenis

SplitText lines wrapped in an inner span whose em blur tweens to zero under an alpha-threshold SVG filter; load, once-on-enter and scrubbed variants; scrubbed banner scale

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev7,652 chars

# Gooey Blur Text Reveal — SplitText Lines Sharpening Under an Alpha-Threshold SVG Filter

## Goal
Build a long editorial page (hero → banner photo → two paragr…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.