Vapor Generator

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…

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: Drag onto a section. Pick a Type, or bind it to a CMS field. Adjust Intensity, Speed, Tint, and Seed. 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 (Framer) | @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

CMS-ready fog, mist & cloud FX