Liquid Text Reveal

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.

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. * 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. * 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.

Fluid text animations with wave.