Shaders

Smoke Ring

Installation

npm i @paper-design/shaders-react

Code

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

<SmokeRing
  style={{ height: 500 }}
  colorBack="hsl(0, 0%, 7%)"
  noiseScale={3}
  noiseIterations={8}
  radius={0.25}
  thickness={0.65}
  innerShape={0.7}
  offsetX={0}
  offsetY={0}
  scale={1}
  rotation={0}
  speed={0.4}
  colors={["hsl(0, 0%, 100%)"]}
/>

Props

colorBack

Background color.

colors

Colors used for the effect.

thickness, radius, innerShape

Ring mask settings.

noiseIterations, noiseScale

How detailed the noise is (number of FBM layers and noise frequency).

offsetX, offsetY

Position of the center.

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

speed

Animation speed.

Description

Radial gradient with layered FBM displacement, masked with ring shape.