Skip to main content
Static line pattern configurable into textures ranging from sharp zigzags to smooth flowing waves. Supports various wave shapes and spacing controls.

​
React Usage

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

export default function MyComponent() {
  return (
    <Waves
      colorFront="#ffbb00"
      colorBack="#000000"
      shape={0}
      frequency={0.5}
      amplitude={0.5}
      spacing={1.2}
      proportion={0.1}
      softness={0}
      style={{ width: '100%', height: '400px' }}
    />
  );
}

​
Vanilla JavaScript Usage

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

const canvas = document.getElementById('myCanvas');
const cleanup = mountWaves(canvas, {
  colorFront: '#ffbb00',
  colorBack: '#000000',
  shape: 0,
  frequency: 0.5,
  amplitude: 0.5,
  spacing: 1.2,
  proportion: 0.1,
  softness: 0,
});

// Call cleanup() when done

​
Parameters

​
colorFront
string
default:"'#ffbb00'"
Foreground color in hex format.
​
colorBack
string
default:"'#000000'"
Background color in hex format.
​
shape
number
default:"0"
Line shape style. Fractional values morph between shapes:
  • 0: Zigzag
  • 1: Sine wave
  • 2-3: Irregular waves
Range: 0 to 3.
​
frequency
number
default:"0.5"
Wave frequency controlling the number of cycles. Range: 0 to 2.
​
amplitude
number
default:"0.5"
Wave amplitude controlling the height. Range: 0 to 1.
​
spacing
number
default:"1.2"
Space between every two wavy lines. Range: 0 to 2.
​
proportion
number
default:"0.1"
Blend point between front and back colors, where 0.5 equals equal distribution. Range: 0 to 1.
​
softness
number
default:"0"
Color transition sharpness. 0 creates hard edges, 1 creates smooth gradients. Range: 0 to 1.

​
Common Sizing Parameters

​
scale
number
default:"0.6"
Overall zoom level of the graphics. Range: 0.01 to 4.
​
rotation
number
default:"0"
Rotation angle in degrees. Range: 0 to 360.
​
fit
'none' | 'contain' | 'cover'
default:"'contain'"
How to fit the shader into the canvas dimensions.
​
offsetX
number
default:"0"
Horizontal offset of the graphics center. Range: -1 to 1.
​
offsetY
number
default:"0"
Vertical offset of the graphics center. Range: -1 to 1.

​
Presets

The Waves shader comes with several built-in presets:
  • Default: Orange zigzag waves on black
  • Groovy: Vertical flowing waves with soft colors
  • Tangled up: Green and blue irregular waves
  • Ride the wave: High amplitude dramatic waves
import { Waves, groovyPreset } from '@paper-design/shaders-react';

<Waves {...groovyPreset.params} />

​
Notes

  • This shader is static and does not animate
  • Supports higher resolution rendering (up to 6016×3384 pixels)
  • Use fractional shape values to create unique hybrid patterns
  • Combine with rotation to create vertical or diagonal wave patterns