smoke ring
A radial multi-colour gradient shaped with layered noise — wispy gas clouds, nebulae, and aurora rings.
Preview
live Install
npm npm i @devmischief/shaders-svelte Code
import { SmokeRing } from '@devmischief/shaders-svelte';
<SmokeRing
width={1280}
height={720}
colors={['#1f1147', '#5b1d9b', '#a04ad9', '#ff7eb0']}
colorBack="#000000"
noiseScale={3}
thickness={0.65}
radius={0.25}
innerShape={0.7}
noiseIterations={8}
scale={0.8}
rotation={0}
offsetX={0}
offsetY={0}
speed={0.5}
fit="contain"
/>
Shader Props
9 | name | description | type | values |
|---|
| colors | Smoke gradient colors (up to 10). | string[] | hex / rgb |
| colorBack | Background color shown behind the ring. | string | hex / rgba |
| noiseScale | Noise frequency. Low values = big slow waves, high values = tight detail. | number | 0.01 → 5 |
| thickness | Thickness of the ring shape. | number | 0.01 → 1 |
| radius | Radius of the ring shape. | number | 0 → 1 |
| innerShape | Ring inner fill amount. Values above 1 fill in the center. | number | 0 → 4 |
| noiseIterations | Layered noise passes. More iterations = more detail, higher GPU cost. | number | 1 → 8 |
| speed | Animation speed of the smoky drift. | number | 0 → 3 |
| fit | How the ring world is fit into the canvas. | string | none · cover · contain |
Common Props
6 | name | description | type | values |
|---|
| originX | Reference point for positioning width in the canvas. | number | 0 → 1 |
| originY | Reference point for positioning height in the canvas. | number | 0 → 1 |
| worldWidth | Virtual width of the graphic before it's scaled to fit the canvas. | number | — |
| worldHeight | Virtual height of the graphic before it's scaled to fit the canvas. | number | — |
| minPixelRatio | Minimum pixel ratio used when rendering the shader (default 2). | number | — |
| maxPixelCount | Maximum pixel count the shader may process. | number | — |