About 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 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.