---
title: "Liquid Heading — Free Framer component · Best of Framer"
description: "Free Framer component · by DjectStudio · Effects. What it does Creates text with continuous wave animations, gentle hover interactions, and ripple effects that spread across letters."
canonical: "https://framer.elliotli.dev/component/liquid-heading"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Liquid Heading

# Liquid Heading

[View on Framer](https://framer.com/marketplace/components/liquid-heading/?via=elliot-li)

![Liquid Heading preview image 1](https://framer.elliotli.dev/og/component/liquid-heading/1609cbc365c69ccc/1600x1200.jpg)

## 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

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)
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #7203

## Details

- **Author**: DjectStudio
- **Published**: 2025-10-28
- **Updated**: 2025-10-28
- **Added**: 2025-10-05
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo