Koi Pond
Koi drift through a pond made of type, each with a mind of its own. Hold the cursor still and they come to see if you have food; click to feed them.
Needs: None. A 2D canvas.
Inspired by the ASCII koi pond on Dao Ho's site (daoho.dev)
Customize
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| koi | number | 7 | How many koi, up to 16. |
| cell | number | 14 | Size of one character cell in px. Smaller cells draw finer fish. |
| color | string | "#e0702c" | Koi patch colour. The deeper red patches are a darker shade of it. |
| ink | string | "" | Glyphs, pale koi and ripples. Empty uses the theme foreground (--mlui-fg). |
| glyphs | string | ".:xX%S8" | Characters from faint to dense, laid across each body by how full and lit it is. |
| damping | number | 0.985 | How long ripples last. Higher rings travel further. |
| speed | number | 1 | Time scale for swimming and ripples. 0 freezes the pond. |
| interactive | boolean | true | Cursor ripples and click to feed. Clicks are read on the window, so links and buttons above keep theirs. |
| seed | number | 7 | Picks each koi's pattern and where they start. |
| background | string | "transparent" | Painted behind the pond. |
| opacity | number | 1 | Opacity of the koi and ripples over the background. |
| avoid | string | "[data-koi-avoid]" | CSS selector for elements the koi swim around: any on the page that overlap the pond. |
| onEat | (eaten: number) => void | – | Called with the running count each time a koi eats a pellet. |
| dpr | number | null | Device pixel ratio to render at. Math.min(devicePixelRatio, 2) when unset. |
| className | string | – | Class on the root element, which fills its parent. |
| style | CSSProperties | – | Style on the root element. Theme it through the --mlui-* variables. |