Skip to main content
The Smoke Ring shader creates a radial multi-colored gradient shaped with layered noise, producing a natural, smoky aesthetic. Perfect for creating halos, smoke effects, clouds, and organic ring shapes with up to 10 colors.

​
Usage

import { SmokeRing } from '@paper-design/shaders-react';

function App() {
  return (
    <SmokeRing
      colorBack="#000000"
      colors={['#ffffff']}
      radius={0.25}
      thickness={0.65}
      innerShape={0.7}
      noiseScale={3}
      noiseIterations={8}
      scale={0.8}
      speed={0.5}
    />
  );
}

​
Parameters

​
colorBack
string
default:"'#000000'"
Background color in hex format. Visible outside the smoke ring.
​
colors
string[]
default:"['#ffffff']"
Array of gradient colors for the ring in hex format. Supports up to 10 colors. Colors blend from inner to outer edge.
​
radius
number
default:"0.25"
Radius of the ring shape (0 to 1). Controls where the ring appears relative to the center.
​
thickness
number
default:"0.65"
Thickness of the ring (0.01 to 1). Larger values create wider rings.
​
innerShape
number
default:"0.7"
Ring inner fill amount (0 to 4). Controls how much the ring fills inward. Higher values create more solid centers.
​
noiseScale
number
default:"3"
Noise frequency (0.01 to 5). Controls the size/scale of the smoky distortion patterns.
​
noiseIterations
number
default:"8"
Number of noise layers (1 to 8). More layers create more detailed, complex smoke patterns but impact performance.
​
speed
number
default:"0.5"
Animation speed multiplier. Controls how fast the smoke flows and evolves.

​
Common Sizing Parameters

​
fit
'none' | 'contain' | 'cover'
default:"'cover'"
How to fit the shader into the canvas dimensions.
​
scale
number
default:"0.8"
Overall zoom level (0.01 to 4).
​
rotation
number
default:"0"
Rotation angle in degrees (0 to 360).
​
offsetX
number
default:"0"
Horizontal offset (-1 to 1).
​
offsetY
number
default:"0"
Vertical offset (-1 to 1).

​
Presets

​
Default

<SmokeRing
  colorBack="#000000"
  colors={['#ffffff']}
  radius={0.25}
  thickness={0.65}
  innerShape={0.7}
  noiseScale={3}
  noiseIterations={8}
  scale={0.8}
  speed={0.5}
/>

​
Solar

<SmokeRing
  colorBack="#000000"
  colors={['#ffffff', '#ffca0a', '#fc6203', '#fc620366']}
  radius={0.4}
  thickness={0.8}
  innerShape={4}
  noiseScale={2}
  noiseIterations={3}
  scale={2}
  offsetY={1}
  speed={1}
/>

​
Line

<SmokeRing
  colorBack="#000000"
  colors={['#4540a4', '#1fe8ff']}
  radius={0.38}
  thickness={0.01}
  innerShape={0.88}
  noiseScale={1.1}
  noiseIterations={2}
  speed={4}
/>

​
Cloud

<SmokeRing
  colorBack="#81ADEC"
  colors={['#ffffff']}
  radius={0.5}
  thickness={0.65}
  innerShape={0.85}
  noiseScale={3}
  noiseIterations={10}
  scale={2.5}
  speed={0.5}
/>

​
Technical Details

  • Max Colors: 10
  • Max Noise Iterations: 8
  • Noise: Uses FBM (Fractal Brownian Motion) with value noise
  • Animation: Dual-cycle time blending for seamless loops
  • Texture: Requires noise texture for randomization
  • Coordinates: Uses object UV coordinates
The shader creates a ring using distance fields, applies multi-octave noise distortion with polar coordinates for organic smoke-like movement, and blends multiple time cycles smoothly for continuous animation.