Smoke Ring

$5

Smoke Ring

A radial, multi-color gradient

Details

Category

Last update

Suggest improvement or report a bug

Smoke Ring — Framer component

About this Component

A radial, multi-color gradient shaped by layered noise into a soft, smoky ring — think a glowing halo or an atmospheric portal effect, animated and fully controllable from a tight, wispy ring to a full smoky glow.

Features

  • Up to 10 colors — build rich, multi-tone smoke gradients instead of a flat single-color glow

  • Ring shape control — adjust Radius and Thickness to go from a thin halo to a broad, filled glow

  • Inner Shape control — shape how the ring's inner fill behaves, from hollow to solid

  • Layered noise — stack up to 8 noise iterations with adjustable Noise Scale for anything from soft wisps to dense, turbulent smoke

  • Fully animated — smooth, continuous motion by default, with full control over speed

  • Built in Paper style, running on a lightweight, zero-dependency shader engine for smooth performance

Controls

  • Colors

  • Background Color

  • Thickness

  • Radius

  • Inner Shape

  • Noise Iterations

  • Noise Scale

  • Speed

  • Scale / Rotation / Offset

How to use

  1. Add the Smoke Ring component onto your canvas

  2. Add up to 10 colors to build your smoke gradient

  3. Adjust Radius and Thickness to shape the ring

  4. Set Inner Shape to control how filled or hollow the center looks

  5. Increase Noise Iterations and Noise Scale for more turbulent, detailed smoke texture

  6. Set Speed to control animation pace, or set it to 0 to freeze on a single frame

Shader powered by Paper Shaders.

Asset updates

Get new Framer assets delivered to your inbox

New releases, free assets, and occasional offers. No spam.

Asset updates

Get new Framer assets delivered to your inbox

New releases, free assets, and occasional offers. No spam.