Skip to content

component

Liquid Drip FX

By Igor Reif

Details

Summary

Liquid Drip FX creates realistic gooey liquid drips that attach to any element, card or button.

Description

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

Introduction

Realistic Gooey Liquid Drips

Rank history

Daily rank per list, from the first snapshot — lower is better.

110012001300138978/148/228/309/79/15
  • All · #3897