Liquid Dynamics: Interactive Fluid Typography for Framer
Elevate your digital storytelling with Liquid Dynamics, a high-performance interactive text component that reacts to user movement with physics-based fluid simulation. Built with a custom "Gooey" SVG filter and an optimized particle engine, this component transforms static headings into a living, breathing aquatic surface.
Unlike standard hover effects, Liquid Dynamics simulates surface tension and viscosity. When a user hovers, the text disperses like water being touched, eventually "snapping" back to its original form using elastic spring physics.
This section provides a detailed breakdown of every customizable parameter within the component to help you balance visual fidelity with performance.
🔠 Typography & Layout
Text Lines: Input for multiple lines of text. Use commas or specific line breaks to define the layout.
Uppercase: A toggle to force all input text into capital letters for a bolder, more consistent fluid surface.
Font: Select the typeface. Thicker, sans-serif fonts typically yield better "liquid" results.
Max Size (200px): Caps the auto-scaled font size to ensure text doesn't overflow.
Letter Spacing: Adjusts tracking. Increased spacing prevents liquid "blobs" from merging too early between letters.
Text Align: Sets horizontal alignment (Left, Center, Right).
H/V Offset: Fine-tune the positioning of the text within its container.
Background / Color: Controls the canvas backdrop and the primary color of the liquid.
Opacity: Adjusts the transparency of the liquid surface.
Gap (4): The sampling density. Lower values create more particles (smoother but heavier).
🧪 Physics & Interaction
Size Min/Max (2px - 5px): Sets the random range for individual particle sizes.
Alpha Threshold (28): Determines which pixels are turned into particles. Lower values capture softer edges.
Mouse Radius (45px): The area of influence around your cursor.
Push Force (25): The strength at which the cursor "shoves" the liquid away.
Friction (0.85): Velocity damping. Higher = thick syrup; Lower = splashy water.
Spring Ease (0.05): The return strength. Higher = snappier return to legibility.
Ripple (Toggle): Enables a constant, ambient waving motion.
Speed / Intensity: Controls the frequency and height of ambient ripples.
Spread (0.01): Phase offset per pixel for "choppier" waves.
✨ Goo Filter & Ghost Stroke
Ghost Stroke (Show/Hide): Toggles a faint, static outline of the text for readability.
Stroke Color/Opacity/Width: Customizes the "guide" outline beneath the liquid.
Goo Filter (On/Off): Master toggle for the SVG metaball effect.
Blur (5): How much particles blend together.
Strength (18): Alpha multiplier for "harder" blob edges.
Cutoff (8): Alpha offset for smaller, tighter liquid droplets.
Hero Sections: Create an unforgettable first impression for creative portfolios.
Interactive Headers: Engage users the moment they land on your page.
Brand Storytelling: Perfect for beverage brands, maritime industries, or tech companies focused on "flow."
We take pride in the code quality of Liquid Dynamics. Please review the following policy before purchasing:
Technical Faults: Refunds will only be initiated if a verifiable technical problem arises within the code that prevents the component from functioning as advertised and our support team is unable to provide a fix.
No "Change of Mind" Refunds: Due to the digital nature of this product (transfer of source code), refunds will not be granted for changes of mind, accidental purchases, or if you decide the aesthetic does not fit your project after downloading.
Compatibility: Please ensure your environment supports custom React/Canvas components before purchasing.
Tip: For the best results, start with a high Strength and low Blur to find your desired text thickness, then increase Blur slightly to get that perfect surface tension.
Raj Nishad
