Liquid Heading

What it does

Creates text with continuous wave animations, gentle hover interactions, and ripple effects that spread across letters. The liquid distortion gives your headings a modern, fluid feel that stands out.

Key Features

• Zero performance impact - Uses Framer Motion's optimized APIs for 60fps animations with no React re-renders

• Fully customizable - Control animation intensity and speed with simple sliders

• Complete typography control - Integrates seamlessly with Framer's Font picker for family, weight, size, spacing, and alignment

• Accessibility built-in - Automatically respects users' reduced motion preferences

• Interactive hover effects - Gentle scale, blur, and ripple effects on mouse over

• Production-ready - Clean, documented code that's ready to ship

Perfect for

• Hero sections and landing pages

• Product launches and marketing sites

• Portfolio headers

• Brand-focused designs

• Any project needing dynamic, attention-grabbing typography

How to use

1. Add the component to your canvas

2. Type your text

3. Customize font, color, and animation settings

4. Done! The liquid effect runs automatically

Controls

• Text - Your heading content

• Font - Full typography control (family, weight, size, spacing, alignment)

• Color - Text color

• Intensity - Controls the strength of the liquid effect (0-3)

• Speed - Controls animation speed (0.1-3)