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.
### ⚡ Performance & SEO
* SEO Friendly: The text is rendered as actual HTML text nodes, meaning search engine crawlers can index it perfectly.
* Hardware Accelerated: Uses optimized CSS inset clipping and performant animation hooks, avoiding heavy SVG layout recalculations.
---
Refund Policy
Not happy with your purchase? Request a refund within 3 days of purchase — no questions asked — by contacting me directly. Refunds are available to customers with fewer than 3 refund requests across all my components in the past 6 months.
Jirei
