Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/paper-design/shaders/llms.txt

Use this file to discover all available pages before exploring further.

A radial multi-colored gradient shaped with layered value noise for a natural, smoky aesthetic. The noise displaces a polar coordinate ring to produce the characteristic wispy, organic edge. Supports up to 10 gradient colors and controls for ring radius, thickness, and noise complexity.

​
Usage

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

export default function Example() {
  return (
    <SmokeRing
      colorBack="#000000"
      colors={['#ffffff']}
      noiseScale={3}
      noiseIterations={8}
      radius={0.25}
      thickness={0.65}
      innerShape={0.7}
      speed={0.5}
      style={{ width: '100%', height: '100%' }}
    />
  );
}

​
Props

​
colorBack
string
default:"#000000"
Background color behind the ring.
​
colors
string[]
default:"[\"#ffffff\"]"
Array of up to 10 gradient colors applied across the ring from inside to outside.
​
radius
number
default:"0.25"
Radius of the ring shape as a fraction of the canvas. Range: 0 to 1.
​
thickness
number
default:"0.65"
Thickness of the ring relative to its radius. Range: 0.01 to 1.
​
innerShape
number
default:"0.7"
Amount of inner fill inside the ring. 0 = fully hollow, 4 = fully filled. Range: 0 to 4.
​
noiseScale
number
default:"3"
Frequency of the noise distortion applied to the ring. Range: 0.01 to 5.
​
noiseIterations
number
default:"8"
Number of noise layers. More iterations produce finer detail. Range: 1 to 8.
​
speed
number
default:"0.5"
Animation speed multiplier. Set to 0 to pause.
​
frame
number
default:"0"
Static frame position when speed is 0.

​
Presets

NameDescription
DefaultWhite smoke ring on black
SolarMulti-color solar corona with offset
LineThin glowing blue ring
CloudWhite cloud shape on a sky-blue background

​
Sizing

This shader uses ShaderSizingParams. See Sizing and fit for fit, scale, rotation, offsetX, offsetY, originX, originY, worldWidth, and worldHeight props.