Spiral

Installation

npm i @paper-design/shaders-react

Code

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

<Spiral
  style={{ height: 500 }}
  colorBack="hsl(211, 100%, 8%)"
  colorFront="hsl(201, 100%, 74%)"
  density={1}
  distortion={0}
  strokeWidth={0.5}
  strokeTaper={0}
  strokeCap={0}
  noise={0}
  noiseFrequency={0}
  softness={0}
  offsetX={0}
  offsetY={0}
  scale={1.3}
  rotation={0}
  speed={1}
/>

Props

colorBack, colorFront

Colors used for the effect.

density

Spacing falloff to simulate radial perspective (0 = no perspective).

strokeWidth

Thickness of stroke.

strokeTaper

Stroke loosing width further from center (0 for full visibility).

distortion

Per-arch shift.

strokeCap

Extra width at the center (no effect on strokeWidth = 0.5).

noiseFrequency, noise

Simplex noise distortion over the shape.

softness

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

offsetX, offsetY

Position of the center.

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

speed

Animation speed.

Description

2-color spiral shape.