Loading shader
Your cursor pours ink into still water. It follows your movement, swirls on a slow current and marbles as it spreads, pooling darker at the edges.
fluid, moderate, MIT, v1.0.0
This is the code for the shader exactly as it is set above. It updates as you change the controls.
Props of the InkBloom React component. The JavaScript version takes the same names in its settings object.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string, string] | ["#f2efe9", "#1d2a6b", "#c2412d", "#0f6b62"] | Paper, Ink one, Ink two, Ink three. Hex colours. |
| speed | number | 1 | Speed. Range 0 to 3. |
| scale | number | 1 | Higher makes the swirls smaller. Range 0.4 to 2.5. |
| intensity | number | 1 | How wide the cursor pours. Range 0.5 to 2.5. |
| swirl | number | 1 | How strongly the water turns the ink. Range 0 to 3. |
| seed | number | 14 | Seed. Range 0 to 999. |
| paused | boolean | false | Freeze the animation on the current frame. |
| maxDpr | number | 2 | Upper bound for devicePixelRatio. Lower it to save GPU time. |
| className | string | none | Classes for the canvas, for example to position it. |
| style | CSSProperties | none | Inline styles for the canvas. |
Moderate. Cost 2 of 3.
Layered noise per pixel. Fine full-screen on recent phones and laptops; on weak GPUs the resolution steps down automatically.