5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/077g_l9cwe8hz.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/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:Tb59,

The "Melt" is here！Achieving award-winning volumetric effects usually requires complex 3D libraries and massive performance trade-offs. VoluMelt changes that.

Engineered for high-end landing pages and immersive hero sections, VoluMelt uses a custom React-based physics engine to simulate deep, atmospheric dissipation. Watch as dense, bright clouds organically evaporate and swell around the cursor, revealing your hidden content with an unparalleled "melting" illusion.

Why VoluMelt?

Volumetric Realism: Advanced opacity algorithms simulate 3D depth, moving away from the static "image-panning" look.
Buttery Smooth Performance: Built on lightweight Canvas 2D. It runs at a consistent 60fps on desktop and mobile without the bloat of Three.js.
Interactive Dissipation: Clouds don't just slide; they evaporate. Adjust the "Melt Expansion" to control the atmospheric physics.
Fully Customizable: Easily swap textures (PNGs) to create smoke, magical dust, falling petals, or cosmic nebula.
Brightness Boost: Mimics harsh light reflections to achieve that crisp, high-end "snow mountain" aesthetic.

Setup & Pro Tips (Documentation)

Add the VoluMelt component to your Framer project.
Upload a transparent fog/cloud PNG (high-quality recommended).
Set Repel Force to 0 to experience the signature "In-place Melting" effect.

The Pro-Designer Mix To recreate the elite aesthetic seen in high-end automotive and luxury sites:

Density: Keep at 180 for a thick, pillowy look.
Melt Expansion: Use 0.3 - 0.4. This creates a subtle "puff" before the cloud vanishes, mimicking real vapor physics.
Contrast is Key: Set your background to a deep color (like dark blue or slate) and let the Brightness Boost (1.3) make the cloud edges pop against the shadows.

Mobile & Tablet Settings VoluMelt is fully responsive. For mobile breakpoints, we recommend:

Density: 80 - 100
Base Size: 700 - 900
Hover Radius: 150 - 200 (Matches thumb-sized touch interactions)

Full Control at Your Fingertips

Every detail is exposed via the property panel, allowing you to fine-tune the atmosphere in seconds without touching a single line of code.

59:[["$","$L5c",null,{"post":{"id":"019d431f-a17c-727c-8268-86920dfcd56f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6599bd2e-ed34-4191-932d-6c2a19338570","name":"Rain Ruan","slug":"rain-ruan","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"mo1adZRkwLSqvn35681l","resolved":true,"title":"VoluMelt","body":"$5d","bodyJson":null,"introduction":"Interactive Volumetric Clouds for Frame","slug":"volumelt","author":{"framerUserId":"6599bd2e-ed34-4191-932d-6c2a19338570","name":"Rain Ruan","slug":"rain-ruan","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/mo1adZRkwLSqvn35681l/volumelt-za65nfhkdNR9jLCWjavUBCRX8NADot"}],"post":null,"createdAt":"2026-03-19T06:51:37.234Z","updatedAt":"2026-03-31T09:00:03.818Z","publishedAt":"2026-03-31T09:00:39.676Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://volumelt.framer.website/","price":"19","paymentUrl":"https://buy.polar.sh/polar_cl_KeIt5KpxgVQc1F9VEUNQOXgHaa8v9GKBRRUZY4FhMNz","workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"cXuHA8IqvW9kZJPH9Frs"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-31T09:00:39.676Z","updatedAt":"2026-03-31T09:00:39.676Z","reported":false}}],"$L5e"]

Suggested for you