About Gooey Text Reveal

A scroll-driven text animation that reveals lines from a soft, melted blur into sharp, readable text, with a fluid gooey effect that follows the scroll — fully customizable.

Features

Scroll-driven text reveal
Line-by-line text animation
Gooey liquid blur effect
Adjustable blur amount
Custom gooey strength and threshold
Adjustable line stagger
Optional repeat animation
Reveal-once mode
Optional smooth scrolling
Custom font, color, and alignment
CMS and variable text support
Responsive text layout
Static-render optimized for Framer

Fully Customizable

Everything can be adjusted directly from Framer’s property panel, from the text styling and gooey effect to line timing, reveal behavior, alignment, and smooth scrolling.

Customize

Text content and paragraph spacing
Font, size, weight, and line height
Text color and alignment
Blur amount
Gooey strength and threshold
Line-by-line reveal and stagger
Repeat or reveal-once behavior
Smooth scrolling
CMS or variable text binding

How It Works

As the text enters the viewport, each line begins as a soft, melted blur and gradually sharpens into focus as you scroll. Lines reveal one after another with an overlapping gooey transition, creating a fluid hand-off between each line. Scroll back up to melt the text again when repeat mode is enabled.