Smoke Backgrounds

Smoke Backgrounds

About Smoke Backgrounds

Unlock entire Depth library for $149. One price. Lifetime.

Get Depth

--------------------------------------------------------

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:

  1. Drag Smoke Background onto the canvas (or into a section).

  2. Set it to fill its frame (or place your content on top).

  3. Adjust the colors and motion in the property panel.

  4. Lower Quality if you need extra performance on mobile.

Watch here

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

Refund Policy

Due to the nature of digital products, all sales are final. Once purchased, this template is non-refundable. Please make sure it fits your needs before completing the checkout. Support: hi@alicorak.com