Loading shader
A dish of ferrofluid with a magnet under your cursor. The fluid gathers toward it and rises into spikes that lean as you move, follow you with a lag and settle back into a glossy pool.
liquid, heavy, 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 Lodestone React component. The JavaScript version takes the same names in its settings object.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string, string] | ["#1b1c20", "#060709", "#dfe6ee", "#c99556"] | Dish, Fluid, Key light, Rim light. Hex colours. |
| speed | number | 1 | Speed. Range 0.25 to 2. |
| scale | number | 1 | Higher packs more, finer spikes. Range 0.6 to 1.8. |
| intensity | number | 1 | How strongly the field pulls the fluid and how wide the crown grows. Range 0.4 to 2. |
| height | number | 1 | Spike height. Range 0.3 to 1.6. |
| swirl | number | 0.8 | How far the crown twists around the magnet. Range 0 to 2. |
| viscosity | number | 1 | Higher is heavier: slower to follow, slower to settle. Range 0.5 to 2.5. |
| seed | number | 7 | 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. |
Heavy. Cost 3 of 3.
Many samples per pixel. Best in a contained area such as a hero or a card, or with maxDpr set to 1.