About this Component
Smoke Background brings a living, atmospheric smoke effect to your Framer site. Built as a single WebGL shader, it renders crisp at any size and adapts to its container, making it perfect for hero sections, headers, cards, or full-screen backdrops.
It's also built to be light: a Quality preset (Low / Medium / High) balances detail against performance, the animation pauses automatically when scrolled off-screen, and a clean static preview is shown on the canvas and in thumbnails.
How to use:
Drag Smoke Background onto the canvas (or into a section).
Set it to fill its frame (or place your content on top).
Adjust the colors and motion in the property panel.
Lower Quality if you need extra performance on mobile.
Features:
Tune everything from the property panel: pick one color or blend two for a gradient, set the flow direction and speed, dial in scale and turbulence, then finish with grain, brightness, vignette, and a fade-in. An optional pointer swirl lets the smoke react softly to the cursor.
Real-time WebGL smoke/fog/mist — no images or video
One color or two-tone gradient tint
Full motion control: speed, scale, flow direction, turbulence
Background color, brightness, grain, and natural vignette
Adjustable fade-in (or instant)
Optional pointer-reactive swirl
Quality presets (Low / Medium / High) for performance
Pauses off-screen, responsive, mobile-friendly
