5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:Ta05,

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

5a:[["$","$L5d",null,{"post":{"id":"019ff03b-e966-739c-9415-072dbc0e275c","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"72d8eb19-eaa6-4c9c-824a-f9ce9be1aa3a","name":"Igor Reif","slug":"igor-reif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/153946/avatar-y2jxLO7nLCb1ORJIPZPF38kh3P7WP4.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"k8ZVtCggQe5NgaJuH98h","resolved":true,"title":"Liquid Drip FX","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"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."}],"attrs":{"level":1}},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"FEATURES"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Realistic gooey liquid drip animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Simple or realistic drip rendering modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatically pauses when outside the viewport for better performance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas preview mode for easier editing in Framer"}]}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Recommended Viscosity Ranges","marks":[{"type":"bold"},{"type":"italic"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"droplet","emoji":"💧"}},{"type":"text","text":" Water "},{"type":"text","text":"10","marks":[{"type":"code"}]},{"type":"text","text":" — "},{"type":"emoji","attrs":{"name":"test_tube","emoji":"🧪"}},{"type":"text","text":" Acid "},{"type":"text","text":"15","marks":[{"type":"code"}]},{"type":"text","text":" — "},{"type":"emoji","attrs":{"name":"drop_of_blood","emoji":"🩸"}},{"type":"text","text":" Blood "},{"type":"text","text":"30","marks":[{"type":"code"}]},{"type":"text","text":" — "},{"type":"emoji","attrs":{"name":"oil_drum","emoji":"🛢"}},{"type":"text","text":" Oil "},{"type":"text","text":"40","marks":[{"type":"code"}]},{"type":"text","text":" — "},{"type":"emoji","attrs":{"name":"honey_pot","emoji":"🍯"}},{"type":"text","text":" Syrup "},{"type":"text","text":"60","marks":[{"type":"code"}]},{"type":"text","text":" — "},{"type":"emoji","attrs":{"name":"chocolate_bar","emoji":"🍫"}},{"type":"text","text":" Melting Chocolate "},{"type":"text","text":"80","marks":[{"type":"code"}]},{"type":"text","text":" — "},{"type":"emoji","attrs":{"name":"bee","emoji":"🐝"}},{"type":"text","text":" Honey "},{"type":"text","text":"90","marks":[{"type":"code"}]},{"type":"text","text":" — "},{"type":"emoji","attrs":{"name":"green_circle","emoji":"🟢"}},{"type":"text","text":" Slime "},{"type":"text","text":"100","marks":[{"type":"code"}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Fluid Physics Guide & General Tips","marks":[{"type":"bold"},{"type":"italic"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Essential guidelines for fine-tuning liquid dynamics when using a base Drip Radius of 8:","marks":[{"type":"italic"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blur Control:","marks":[{"type":"code"}]},{"type":"text","text":" Use higher blur values for thicker, denser liquids. Keep blur lower (8–12) for thin, watery fluids."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gooey Intensity:","marks":[{"type":"code"}]},{"type":"text","text":" Delivers the most realistic liquid merging effect when set to higher ranges (50–80)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lower Gravity:","marks":[{"type":"code"}]},{"type":"text","text":" Extends the stretching phase, making dense liquids (Honey, Slime) cling and detach very slowly from the top bar."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Higher Gravity:","marks":[{"type":"code"}]},{"type":"text","text":" Accelerates the detachment, making thin liquids (Water, Blood) snap off quickly."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed:","marks":[{"type":"code"}]},{"type":"text","text":" Customize this to fit your composition's pacing. Or pair faster fall speeds with thin, watery fluids and slower speeds with heavy liquids."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drip Radius vs. Blur:","marks":[{"type":"code"}]},{"type":"text","text":" Scale blur proportionally — if you increase the drip radius, increase the blur value to maintain proper gooey cohesion."}]}]}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"TAGS"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"liquid","marks":[{"type":"code"}]},{"type":"text","text":" "},{"type":"text","text":"gooey","marks":[{"type":"code"}]},{"type":"text","text":" "},{"type":"text","text":"canvas","marks":[{"type":"code"}]},{"type":"text","text":" "},{"type":"text","text":"physics","marks":[{"type":"code"}]},{"type":"text","text":" "},{"type":"text","text":"dripping","marks":[{"type":"code"}]},{"type":"text","text":" "},{"type":"text","text":"animation","marks":[{"type":"code"}]},{"type":"text","text":" "},{"type":"text","text":"effects","marks":[{"type":"code"}]},{"type":"text","text":" "},{"type":"text","text":"interactive","marks":[{"type":"code"}]}]}]},"introduction":"Realistic Gooey Liquid Drips","slug":"liquid-drip-fx","author":{"framerUserId":"72d8eb19-eaa6-4c9c-824a-f9ce9be1aa3a","name":"Igor Reif","slug":"igor-reif","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/153946/avatar-y2jxLO7nLCb1ORJIPZPF38kh3P7WP4.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/72d8eb19-eaa6-4c9c-824a-f9ce9be1aa3a/019ff035-bd0c-721f-b021-84405a5c6e70.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-11T09:51:25.577Z","updatedAt":"2026-08-11T10:13:25.160Z","publishedAt":"2026-08-11T09:51:25.574Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/LiquidDripFX-JXkzKJ.js@zDPy7d7q0NknMlMSJjbB","previewUrl":"https://liquid-drip.framer.media/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"zDPy7d7q0NknMlMSJjbB","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-11T09:51:26.054Z","updatedAt":"2026-08-11T09:51:26.054Z","reported":false}}],"$L5f"]

Suggested for you