GooeyText

Gooey Text Morph animates a seamless transformation between multiple text strings, producing a captivating blur morph transition that feels organic and cinematic. It’s ideal for highlighting multiple key phrases, showcasing brand values, or adding movement to minimalist designs.

Built using native Framer Motion and SVG filters, the effect creates the illusion of text melting and reforming — soft, bold, and futuristic all at once.

✨ Core Features

• Morphing Animation: Smoothly transitions between multiple words or phrases with a liquid-like motion.

• Adjustable Timing: Fine-tune both morph duration (Morph Time) and pause intervals (Cooldown Time) between transitions.

• Full Typography Control: Customize font, size, weight, line height, and letter spacing directly within Framer’s font controls.

• Dynamic Color Control: Instantly adjust text color to match your project’s branding or background tone.

• Performance Optimized: Uses requestAnimationFrame for buttery-smooth performance and efficient updates.

• Framer Native Controls: Fully adjustable through property controls — no code editing required.

🪄 How to Use

1. Add the Component:Install “Gooey Text Morph” from the Marketplace and drag it onto your canvas.

2. Customize Your Texts:In the right-hand panel, use the Texts array to enter your list of words or phrases — e.g. ["Design", "Create", "Innovate"].

3. Tune the Animation:

   • Adjust Morph Time to control how long each transition lasts.

   • Adjust Cooldown Time for how long each word stays visible before morphing.

4. Style Your Typography:Open the Font controls to set font family, size, and weight.

5. Pick Your Color:Set a single text color that applies across all transitions.

6. Preview in Play Mode:Run the prototype or publish to see the gooey text morphing live.