static mesh gradient
A multi-point mesh gradient driven by two perpendicular sine waves. Static by default — flip a layout seed, or animate by setting speed above zero.
Preview
live Install
npm npm i @devmischief/shaders-svelte Code
import { StaticMeshGradient } from '@devmischief/shaders-svelte';
<StaticMeshGradient
width={1280}
height={720}
colors={['#3a86ff', '#8338ec', '#ff006e', '#fb5607', '#ffbe0b']}
positions={2}
waveX={1}
waveXShift={0.6}
waveY={1}
waveYShift={0.21}
mixing={0.93}
grainMixer={0}
grainOverlay={0}
scale={1}
rotation={270}
offsetX={0}
offsetY={0}
speed={0}
fit="contain"
/>
Shader Props
11 | name | description | type | values |
|---|
| colors | Mesh gradient color spots (up to 10). | string[] | hex / rgb |
| positions | Seed for color-spot placement. Each integer produces a different layout. | number | 0 → 100 |
| waveX | Strength of the X-axis sine wave distortion. | number | 0 → 1 |
| waveXShift | Phase offset of the X-axis wave. | number | 0 → 1 |
| waveY | Strength of the Y-axis sine wave distortion. | number | 0 → 1 |
| waveYShift | Phase offset of the Y-axis wave. | number | 0 → 1 |
| mixing | Blend sharpness. 0 = hard stripes, 0.5 = smooth bands, 1 = gradual blend. | number | 0 → 1 |
| grainMixer | Grain distortion applied to color edges. | number | 0 → 1 |
| grainOverlay | Post-process black/white grain overlay. | number | 0 → 1 |
| speed | Animation speed. Default 0 — the mesh is static unless you set this above zero. | number | 0 → 3 |
| fit | How the gradient world is fit into the canvas. | string | cover · contain |
Common Props
6 | 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 | — |