waves

A static line pattern that morphs continuously from sharp zigzags to smooth sine waves to irregular flowing forms — fractional shape values blend between them.

Preview

live

Install

npm

npm i @devmischief/shaders-svelte

Code

import { Waves } from '@devmischief/shaders-svelte';

<Waves
  width={1280}
  height={720}
  colorBack="#000000"
  colorFront="#ffbb00"
  shape={1}
  frequency={0.5}
  amplitude={0.5}
  spacing={1.2}
  proportion={0.1}
  softness={0}
  scale={0.6}
  rotation={0}
  offsetX={0}
  offsetY={0}
  fit="none"
/>

Shader Props

name	description	type	values
colorBack	Background color shown behind the waves.	string	hex / rgba
colorFront	Wave line color.	string	hex / rgb
shape	Wave shape morph. 0 = zigzag, 1 = sine, 2–3 = irregular waves. Fractional values blend between shapes.	number	0 → 3
frequency	Wave frequency.	number	0 → 2
amplitude	Wave amplitude.	number	0 → 1
spacing	Space between every two wavy lines.	number	0 → 2
proportion	Blend point between front and back colors. 0.5 = equal distribution.	number	0 → 1
softness	Color transition sharpness. 0 = hard edge, 1 = smooth gradient.	number	0 → 1
fit	How the wave pattern is fit into the canvas.	string	none · cover · contain

Common Props

name	description	type	values
originX	Reference point for positioning width in the canvas.	number	0 → 1
originY	Reference point for positioning height in the canvas.	number	0 → 1
worldWidth	Virtual width of the graphic before it's scaled to fit the canvas.	number	—
worldHeight	Virtual height of the graphic before it's scaled to fit the canvas.	number	—
minPixelRatio	Minimum pixel ratio used when rendering the shader (default 2).	number	—
maxPixelCount	Maximum pixel count the shader may process.	number	—