Blob Text Animation

Blob Text Animation

About Blob Text Animation

Blob Text is an animated Framer component that cycles through multiple text values using smooth morphing transitions. Each word flows into the next with a subtle vertical motion, scale shift, and an optional gooey, liquid-like distortion that creates a blob effect during transitions.

You can control the timing, typography, alignment, and intensity of the gooey effect, making it easy to create expressive headlines, hero sections, or dynamic messaging without keyframes or external libraries.

Key Features

  • Smooth text morphing between multiple phrases

  • Optional gooey / blob-style liquid effect

  • Adjustable transition and pause duration

  • Custom font, size, spacing, and alignment

  • Works with comma-separated text values

  • Lightweight and fully responsive

Use Cases

  • Hero headlines

  • Marketing taglines

  • Landing page intros

  • Creative portfolios

  • Brand statements and slogans

Best Practices / Tips

  • Keep text lengths similar for the cleanest morphing

  • Use moderate gooey values for subtle, premium motion

  • Increase pause duration for readability in hero sections

What’s Included

  • One Blob Text component

  • Text cycling and timing controls

  • Gooey effect intensity slider

  • Full typography customization

Who It’s For

  • Framer designers and creators

  • Motion-focused landing pages

  • Brand and marketing websites

  • No-code builders wanting expressive text