Shaders

Swirl

Installation

npm i @paper-design/shaders-react

Code

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

<Swirl
  style={{ height: 500 }}
  colorBack="hsl(0, 100%, 10%)"
  bandCount={4}
  twist={0.1}
  softness={0}
  noiseFrequency={0.32}
  noise={0.32}
  offsetX={0}
  offsetY={0}
  scale={1}
  rotation={0}
  speed={0.32}
  colors={[
    "hsl(0, 100%, 91%)",
    "hsl(0, 100%, 77%)",
    "hsl(0, 100%, 20%)"
  ]}
/>

Props

colorBack

Background color.

colors

Colors used for the effect.

bandCount

Number of sectors.

twist

Sectors twist intensity (0 = linear).

softness

Color transition sharpness (0 = hard edge, 1 = smooth fade).

noiseFrequency

Noise scale.

noise

Simplex noise distortion amount over the shape.

offsetX, offsetY

Position of the center.

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

speed

Animation speed.

Description

Twisting radial bands.