Skip to content

component

Liquid Heading

By DjectStudio

Details

Summary

What it does Creates text with continuous wave animations, gentle hover interactions, and ripple effects that spread across letters.

Description

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)

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400153838/148/228/309/79/15
  • All · #5104