About 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
Add the component to your canvas
Type your text
Customize font, color, and animation settings
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)