Liquid Text Reveal

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.