Waves

Installation

npm i @paper-design/shaders-react

Code

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

<Waves
  style={{ height: 500 }}
  colorBack="hsl(0, 0%, 0%)"
  colorFront="hsl(44, 100%, 50%)"
  frequency={0.5}
  amplitude={0.5}
  spacing={1}
  proportion={0.1}
  softness={0}
  shape={0}
  scale={2}
  rotation={0}
/>

Props

colorBack, colorFront

Colors used for the effect.

shape

Wave shape (0 = zigzag, 1 = sine wave, 1 to 3 = irregular wave).

amplitude, frequency, spacing

Wave settings.

proportion

Blend point between 2 colors (0.5 = equal distribution).

softness

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

scale

Overall pattern zoom.

rotation

Overall pattern rotation angle.

Description

Waveform pattern.