---
title: "Vapor Generator — Free Framer component · Best of Framer"
description: "Free Framer component · by Joshua Roberts · Effects. Vapor Generator 🌫️ Real GPU-rendered clouds, fog, mist, steam, smoke, haze and nebula from a single shader — each with its own tuned…"
canonical: "https://framer.elliotli.dev/component/vapor-generator"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Vapor Generator

# Vapor Generator

CMS-ready fog, mist & cloud FX

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

![Vapor Generator preview image 1](https://framer.elliotli.dev/og/component/vapor-generator/a42e337d394631c9/1600x1200.jpg)

## Summary

Vapor Generator 🌫️ Real GPU-rendered clouds, fog, mist, steam, smoke, haze and nebula from a single shader — each with its own tuned preset, live self-shadowing, and performance…

## Description

## **Vapor Generator 🌫️**

Real GPU-rendered clouds, fog, mist, steam, smoke, haze and nebula from a single shader — each with its own tuned preset, live self-shadowing, and performance that auto-adapts down to low-end phones.

### **Best use cases:**

Hero atmosphere, footer transitions, background ambiance behind CTAs, seasonal landing pages, and CMS-driven sites that need a different vapor type per page.

### **How to Use:**

1.  Drag onto a section.
    
2.  Pick a Type, or bind it to a CMS field.
    
3.  Adjust Intensity, Speed, Tint, and Seed.
    
4.  Fine-tune Shape, Motion, Interaction, Lighting, and Framing, or leave on Preset.
    

### **Highlights:**

-   **Seven presets, one shader** — Clouds, Fog, Mist, Steam, Smoke, Haze, Nebula, each independently tuned
    
-   **CMS-bindable type** — the right vapor renders automatically per page
    
-   **Auto-adapting performance** — drops detail live if frames start missing, pauses off-screen
    
-   **Real volumetric lighting** — a second noise sample self-shadows the vapor for actual depth
    
-   **Scroll, cursor & tilt response** — spring-driven drift, attract/repel cursor, gyroscope parallax
    
-   **Seamless forever** — exactly periodic noise domain, no visible loop or drift over time
    
-   **Fully non-blocking** — pointer events off throughout, never intercepts clicks
    
-   **Graceful fallback** — soft gradient in the same palette on devices without WebGL
    

### **What Did You Craft?**

Did you build something cool with this component? I'd love to see it! Before you share it to your Framer or Twitter(X), feel free to tag me in the post.

[@Joshua Roberts](/community/creator/@joshua-roberts/) (Framer) | [@JoshuaRDesign](https://x.com/JoshuaRDesign) (Twitter)

### **Need Help?**

If you are facing any issues with this component or have any questions feel free to DM or email me about it.

[craft@joshuaroberts.design](mailto:craft@joshuaroberts.design)

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

-   All · #2048

## Details

- **Author**: Joshua Roberts
- **Published**: 2026-08-19
- **Updated**: 2026-08-31
- **Added**: 2026-08-19
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows