Theme

Smoke Ring

Free

A ring of layered smoke noise with controls for ring radius, thickness, inner fill, noise detail, and palette. Adapted from Smoke Ring by Paper Shaders (shaders.paper.design) under the Apache 2.0 license.

Loading code...

Starwind Dependencies

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Upgrade to Pro

Failed to load code. Please try again.

Customize

Controls

Smoke 1

Smoke 2

Smoke 3

Smoke 4

Smoke 5

Smoke 6

Background

Smoke colors1

Smoke 1 opacity1

Smoke 2 opacity1

Smoke 3 opacity1

Smoke 4 opacity1

Smoke 5 opacity1

Smoke 6 opacity1

Inner fill0.7

Noise layers8

Noise scale3

Radius0.25

Thickness0.65

Speed0.5

Scale0.8

Rotation0

Offset X0

Offset Y0

Code

Usage

<ShaderSmokeRing
  smokeColor1="#ffffff"
  smokeColor2="#ffffff"
  smokeColor3="#ffffff"
  smokeColor4="#ffffff"
  smokeColor5="#ffffff"
  smokeColor6="#ffffff"
  backgroundColor="#000000"
  smokeColorCount={1}
  smokeOpacity1={1}
  smokeOpacity2={1}
  smokeOpacity3={1}
  smokeOpacity4={1}
  smokeOpacity5={1}
  smokeOpacity6={1}
  ringInnerFill={0.7}
  smokeLayers={8}
  smokeNoiseScale={3}
  ringRadius={0.25}
  ringThickness={0.65}
  smokeSpeed={0.5}
  graphicScale={0.8}
  graphicRotation={0}
  graphicOffsetX={0}
  graphicOffsetY={0}
/>

Props

prop	type	default	description
`smokeColorCount`	`number`	`1`	Number of active smoke colors, from 1 to 6.
`smokeColor1`	`string`	`#ffffff`	Smoke color 1 as a CSS color.
`smokeOpacity1`	`number`	`1`	Opacity of smoke color 1, from 0 to 1.
`smokeColor2`	`string`	`#ffffff`	Smoke color 2 as a CSS color.
`smokeOpacity2`	`number`	`1`	Opacity of smoke color 2, from 0 to 1.
`smokeColor3`	`string`	`#ffffff`	Smoke color 3 as a CSS color.
`smokeOpacity3`	`number`	`1`	Opacity of smoke color 3, from 0 to 1.
`smokeColor4`	`string`	`#ffffff`	Smoke color 4 as a CSS color.
`smokeOpacity4`	`number`	`1`	Opacity of smoke color 4, from 0 to 1.
`smokeColor5`	`string`	`#ffffff`	Smoke color 5 as a CSS color.
`smokeOpacity5`	`number`	`1`	Opacity of smoke color 5, from 0 to 1.
`smokeColor6`	`string`	`#ffffff`	Smoke color 6 as a CSS color.
`smokeOpacity6`	`number`	`1`	Opacity of smoke color 6, from 0 to 1.
`backgroundColor`	`string`	`#000000`	Background color behind the ring. Accepts any CSS color.
`smokeNoiseScale`	`number`	`3`	Frequency of the smoke noise. Range 0.01 to 5.
`smokeLayers`	`number`	`8`	Number of noise layers. More layers add detail. Range 1 to 8.
`ringRadius`	`number`	`0.25`	Radius of the ring. Range 0 to 1.
`ringThickness`	`number`	`0.65`	Thickness of the ring. Range 0.01 to 1.
`ringInnerFill`	`number`	`0.7`	How far the smoke fills the ring center. Range 0 to 4.
`smokeSpeed`	`number`	`0.5`	Animation speed. 0 stops the animation. Range 0 to 4.
`graphicScale`	`number`	`0.8`	Overall zoom level of the graphic.
`graphicRotation`	`number`	`0`	Rotation of the graphic in degrees.
`graphicOffsetX`	`number`	`0`	Horizontal offset of the graphic center.
`graphicOffsetY`	`number`	`0`	Vertical offset of the graphic center.
`graphicFit`	`"none" \| "contain" \| "cover"`	`contain`	How the graphic fits the canvas.
`opacity`	`number`	`1`	Sets the overall opacity of the shader background wrapper.
`maxDpr`	`number`	`1.5`	Caps device pixel ratio for sharper output without runaway GPU cost.
`maxFps`	`30 \| 45 \| 60`	`60`	Caps the animation frame rate for performance-sensitive pages.