Liquid Drip FX

Liquid Drip FX creates realistic gooey liquid drips that attach to any element, card or button. Customize everything from water, blood and oil to thick chocolate-melting, honey and slime with just a few controls.

FEATURES

• Realistic gooey liquid drip animation

• Simple or realistic drip rendering modes

• Automatically pauses when outside the viewport for better performance

• Canvas preview mode for easier editing in Framer

Recommended Viscosity Ranges

💧 Water 10 — 🧪 Acid 15 — 🩸 Blood 30 — 🛢 Oil 40 — 🍯 Syrup 60 — 🍫 Melting Chocolate 80 — 🐝 Honey 90 — 🟢 Slime 100

Fluid Physics Guide & General Tips

Essential guidelines for fine-tuning liquid dynamics when using a base Drip Radius of 8:

• Blur Control: Use higher blur values for thicker, denser liquids. Keep blur lower (8–12) for thin, watery fluids.

• Gooey Intensity: Delivers the most realistic liquid merging effect when set to higher ranges (50–80).

• Lower Gravity: Extends the stretching phase, making dense liquids (Honey, Slime) cling and detach very slowly from the top bar.

• Higher Gravity: Accelerates the detachment, making thin liquids (Water, Blood) snap off quickly.

• Speed: Customize this to fit your composition's pacing. Or pair faster fall speeds with thin, watery fluids and slower speeds with heavy liquids.

• Drip Radius vs. Blur: Scale blur proportionally — if you increase the drip radius, increase the blur value to maintain proper gooey cohesion.

TAGS

liquid gooey canvas physics dripping animation effects interactive