Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/paper-design/shaders/llms.txt

Use this file to discover all available pages before exploring further.

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