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.

A static line pattern rendered as alternating bands of two colors. The line shape morphs continuously between zigzag, sine, and two irregular wave modes using the shape parameter. Frequency, amplitude, spacing, and softness give full control over the texture appearance.

​
Usage

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

export default function Example() {
  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: '100%' }}
    />
  );
}

​
Props

​
colorFront
string
default:"#ffbb00"
Foreground color of the wave lines.
​
colorBack
string
default:"#000000"
Background color between the wave lines.
​
shape
number
default:"0"
Line shape. 0 = zigzag, 1 = sine, 2–3 = irregular waves. Fractional values morph between shapes. Range: 0 to 3.
​
frequency
number
default:"0.5"
Wave frequency (number of cycles). Range: 0 to 2.
​
amplitude
number
default:"0.5"
Wave amplitude (height of oscillation). Range: 0 to 1.
​
spacing
number
default:"1.2"
Space between every two wave lines. Range: 0 to 2.
​
proportion
number
default:"0.1"
Blend point between the front and back colors. 0.5 = equal distribution. Range: 0 to 1.
​
softness
number
default:"0"
Color transition sharpness. 0 = hard edge, 1 = smooth gradient. Range: 0 to 1.

​
Presets

NameDescription
DefaultYellow zigzag lines on black
GroovyIrregular waves, coral and cream
Tangled upDense entangled waves in teal and green
Ride the waveLarge wave silhouettes in near-black and white

​
Sizing

This shader uses ShaderSizingParams. See Sizing and fit for fit, scale, rotation, offsetX, offsetY, originX, originY, worldWidth, and worldHeight props.