Waves
Installation
npm i @paper-design/shaders-react
Code
import { Waves } from '@paper-design/shaders-react';
<Waves
height={500}
colorBack="#000000"
colorFront="#ffbb00"
frequency={0.5}
amplitude={0.5}
spacing={1.2}
proportion={0.1}
softness={0}
shape={0}
scale={0.6}
rotation={0}
/>
Props
| Name | Description | Type | Values |
|---|---|---|---|
| colorBack | Background color | string | Hex, RGB, or HSL color |
| colorFront | The color of wavy lines | string | Hex, RGB, or HSL color |
| amplitude | Wave amplitude | number | 0 to 1 |
| frequency | Wave frequency | number | 0 to 2 |
| spacing | The space between every two wavy lines | number | 0 to 2 |
| proportion | Blend point between front and back colors (0.5 = equal distribution) | number | 0 to 1 |
| softness | Color transition sharpness (0 = hard edge, 1 = smooth gradient) | number | 0 to 1 |
| shape | Line shape control: zigzag at 0, sine at 1, irregular waves at 2. Intermediate values morph gradually between these shapes | number | 0 to 3 |
| width | CSS width style of the shader element | number | string | — |
| height | CSS height style of the shader element | number | string | — |
| scale | Overall zoom level of the graphics | number | 0.01 to 4 |
| rotation | Overall rotation angle of the graphics | number | 0 to 360 |
Description
Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves.