---
title: "VoluMelt — Framer component · Best of Framer"
description: "$19.00 · Framer component · by Rain Ruan · Sections. VoluMelt changes that."
canonical: "https://framer.elliotli.dev/component/volumelt"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/VoluMelt

# VoluMelt

Interactive Volumetric Clouds for Frame

[View on Framer](https://framer.com/marketplace/components/volumelt/?via=elliot-li)

![VoluMelt preview image 1](https://framer.elliotli.dev/og/component/volumelt/1c5b79c02b03f842/1600x1200.jpg)

## Summary

VoluMelt changes that.

## Description

**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)

1.  Add the **VoluMelt** component to your Framer project.
    
2.  Upload a transparent fog/cloud PNG (high-quality recommended).
    
3.  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.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-gy5w9bz8-6PP4153y07WbnUbxs1Smt5HDqDBT58)

## Rank history [How rankings work →](/terms#rankings)

-   All · #5446

## Details

- **Author**: Rain Ruan
- **Price**: $19.00
- **Published**: 2026-03-31
- **Updated**: 2026-03-31
- **Added**: 2026-03-19
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes