Loading shader
A slab of soft optical glass on an engraved print. Your cursor presses a lens into it; the print bends, splits into colour where the glass curves and the trough you leave sags back slowly.
glass, 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 FlintGlass React component. The JavaScript version takes the same names in its settings object.
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string, string] | ["#13171c", "#a9b1ba", "#c38d5e", "#9fc7b4"] | Paper, Ink, Accent ink, Glass tint. Hex colours. |
| speed | number | 1 | Speed. Range 0.25 to 2. |
| scale | number | 1 | How wide the pressed lens is. Range 0.6 to 1.6. |
| intensity | number | 1 | How deep the cursor presses into the glass. Range 0.3 to 2. |
| dispersion | number | 1 | How far the colours split where the glass bends. Range 0 to 2. |
| swirl | number | 0.6 | How much the lens turns around the cursor. Range 0 to 2. |
| viscosity | number | 1 | Higher is stiffer glass: the trail sags back more slowly. Range 0.5 to 2.5. |
| seed | number | 3 | 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.