warp
Animated colours warped by noise and swirls over a base pattern. The marbled-paper / liquid / smoky look — pick a base, dial in the distortion.
Preview
live Install
npm npm i @devmischief/shaders-svelte Code
import { Warp } from '@devmischief/shaders-svelte';
<Warp
width={1280}
height={720}
colors={['#3a86ff', '#06d6a0', '#ffd166', '#ef476f']}
shape="checks"
shapeScale={0.1}
proportion={0.45}
softness={1}
distortion={0.25}
swirl={0.8}
swirlIterations={10}
scale={1}
rotation={0}
offsetX={0}
offsetY={0}
speed={1}
fit="none"
/>
Shader Props
10 | name | description | type | values |
|---|
| colors | Warp gradient colors (up to 10). | string[] | hex / rgb |
| shape | Base pattern that the colors warp over. | string | checks · stripes · edge |
| shapeScale | Zoom level of the base pattern. | number | 0 → 1 |
| proportion | Blend midpoint between colors. 0.5 = equal distribution; tilt toward 0 or 1 to weight one end. | number | 0 → 1 |
| softness | Color transition sharpness. 0 = hard edge, 1 = smooth gradient. | number | 0 → 1 |
| distortion | Strength of noise-based distortion. | number | 0 → 1 |
| swirl | Strength of the swirl distortion. | number | 0 → 1 |
| swirlIterations | Layered swirl passes. More iterations = deeper marbling, but higher GPU cost. Effective with swirl > 0. | number | 0 → 20 |
| speed | Animation speed of the warping motion. | number | 0 → 3 |
| fit | How the gradient world is fit into the canvas. | string | none · 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 | — |