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
💧 Water 10 — 🧪 Acid 15 — 🩸 Blood 30 — 🛢 Oil 40 — 🍯 Syrup 60 — 🍫 Melting Chocolate 80 — 🐝 Honey 90 — 🟢 Slime 100
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.
liquid gooey canvas physics dripping animation effects interactive
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
💧 Water 10 — 🧪 Acid 15 — 🩸 Blood 30 — 🛢 Oil 40 — 🍯 Syrup 60 — 🍫 Melting Chocolate 80 — 🐝 Honey 90 — 🟢 Slime 100
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.
liquid gooey canvas physics dripping animation effects interactive
Igor Reif
