Skip to content

component

Smoke Backgrounds

By Ali Çorak

Details

Summary

Atmospheric smoke effect

Description

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

Introduction

Atmospheric smoke effect

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600162638/148/228/309/79/15
  • All · #6263