Gooey Text

Gooey Text creates a distinctive gooey morph effect between two text states using SVG filters and GSAP animation. Choose between Morph, Slide X, and Slide Y transitions, then customize the typography, color, blur intensity, timing, and interaction behavior directly from Framer's property panel.

Designed to be lightweight, responsive, and easy to drop into landing pages, hero sections, buttons, navigation, portfolios, and interactive experiences.

Great for

• Hero headlines and landing pages

• Interactive typography

• Creative portfolios

• Agency and studio websites

• Navigation and menu interactions

• CTA sections

• Product launches

• Experimental web design

• Framer templates

• Motion-focused websites

Preview:

https://gooeytext.framer.website/

Features

• Smooth gooey text transitions

• Morph, Slide X, and Slide Y variants

• Custom Text A and Text B

• Framer Font control

• Adjustable text color

• Adjustable goo strength

• Custom animation duration

• Adjustable slide distance

• Loop animation

• Hover interaction

• Start from either text state

• Responsive sizing

• Reduced-motion support

• Static-renderer support for Framer

• Automatic animation cleanup

• Lightweight SVG-based effect

• Fully customizable through Framer Property Controls

Customize

Everything important is exposed through Framer's property controls.

Customize:

• Text A

• Text B

• Font

• Text alignment

• Font size and typography

• Text color

• Goo strength

• Animation duration

• Slide distance

• Loop timing

• Hover behavior

• Starting text state

• Transition variant

No code changes are required for normal customization.

Support

Need help using the component, want to report an issue, or have an idea for an improvement?

X: @Karim Saif

Email: karimsaif010@gmail.com

I'm happy to help with setup, customization, and component questions.