---
title: "Liquid Text Reveal — Free Framer component · Best of Framer"
description: "Free Framer component · by Jirei · Text. Liquid Text Reveal acts as a drop-in text component that seamlessly fills your words like a glass of water when they scroll into view."
canonical: "https://framer.elliotli.dev/component/liquid-text-reveal"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Liquid Text Reveal

# Liquid Text Reveal

Fluid text animations with wave.

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

![Liquid Text Reveal preview image 1](https://framer.elliotli.dev/og/component/liquid-text-reveal/3b80ac9a5e56c143/1600x1200.jpg)

## Summary

Liquid Text Reveal acts as a drop-in text component that seamlessly fills your words like a glass of water when they scroll into view.

## Description

Elevate your site's typography with a mesmerizing, physics-inspired liquid filling effect. **Liquid Text Reveal** acts as a drop-in text component that seamlessly fills your words like a glass of water when they scroll into view. Built specifically for Framer, it flawlessly handles complex descenders, perfectly supports custom Web Fonts, and features fully independent horizontal wave mechanics for a continuous, smooth flow.

**\### 🔥 Key Features**

\* **Continuous Fluid Motion:** The wave never stops rippling. It utilizes Framer Motion's imperative animation loops for butter-smooth horizontal flow, independently decoupled from the vertical fill.

\* **Gradients & Solids:** Fill your text with a simple solid color, or unlock stunning visuals using fully configurable CSS gradients.

\* **Flawless Clipping & Alignment:** Engineered to bypass notorious browser text-clipping bugs. Safe for ascenders and descenders (like the letters "p", "q", and "g") so your fluid never randomly gets chopped off.

\* **Static Mode Support:** Want a static, half-filled text look without the animation? Just set the fill percentage and toggle to Static Fill mode.

**\### 🎛️ Customization Controls**

\* **Typography:** Full access to Framer's native Font controls (Size, Variant, Line Height, Letter Spacing, Alignment).

\* **Fill Style:** Toggle between Solid Color or Gradient (with controls for Start/End colors and Angle).

\* **Wave Physics:** Control the Wave Height, Wave Width, Flow Speed, and Flow Direction (Left to Right / Right to Left).

\* **Target Fill (%):** Decide exactly how high the liquid rises (e.g., fill to 100% and disappear, or stop halfway at 50%).

\* **Styling FX:** Built-in toggles for Text Shadows (X, Y, Blur, Color) and Text Borders (Stroke Width, Color).

\* **Timing:** Configure the Fill Duration and Entry Delay for the reveal animation.

\* **Disable Animation:** One-click toggle to disable all movement for accessibility or static mockups.

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

-   All · #6249

## Details

- **Author**: Jirei
- **Published**: 2026-04-27
- **Updated**: 2026-07-30
- **Added**: 2026-04-24
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing