Koi

Koi circle a quiet pond, turning around lily pads and leaving rings on the surface. A click scatters food and sends a ripple outward; nearby koi converge on the pellets.

Glyph style

KOI / GARDEN PONDLIVE

Click to feed the pond.

Seed 19, columns 110, and speed 1 are fixed in this demo. The palette and calm controls update the running engine without rebuilding the world.

Behavior

Swim — koi turn smoothly and avoid the pond edges and lily pads.
Feed — a click creates a cluster of pellets and a surface ripple.
Ripple — rings expand and fade, independent of the fish.
Nibble — a koi that reaches a pellet emits a nibble event.
Calm — removes extra surface shimmer.

Interaction

Click the canvas to feed the pond. From code:

import { createKoi } from "ascii-things/koi";

const pond = createKoi(canvas, { seed: 19, count: 7 });
pond.feed(canvas.clientWidth * 0.5, canvas.clientHeight * 0.5);
// Equivalent: pond.trigger("feed", x, y);

feed() is disabled under reduced motion.

Options

Option	Type	Default
`count`	`number`	`7`	Koi in the pond
`scale`	`number`	`1`	Scene scale hint, clamped 0.5–2
`seed`	`number`	random	Reproducible pond
`palette`	name \| `Palette` \| `"auto"`	`"abyss"`	Theme
`columns`	`number`	`124`	Art-direction target
`speed`	`number`	`1`	Time scale; `0` freezes
`interactive`	`boolean`	`true`	Pointer input
`maxDpr`	`number`	`2`	Backing-store cap
`maxCells`	`number`	`16000`	Grid cap
`adaptiveQuality`	`boolean`	`true`	Reduce DPR when frames run slow
`calm`	`boolean`	`false`	Remove surface shimmer
`paused`	`boolean`	`false`	Start with the clock stopped
`fontFamily`	`string`	canvas CSS font	Drawing font
`label`	`string`	—	Accessible name
`onEvent`	`(event) => void`	—	Feed and nibble moments

Stats

KoiStats adds koi and ripples:

type KoiStats = {
  fps: number;
  frameMs: number;
  cells: number;
  columns: number;
  rows: number;
  koi: number;
  ripples: number;
};

React

import { AsciiKoi } from "ascii-things/react";

<AsciiKoi
  seed={19}
  count={7}
  palette="paper"
  aspectRatio="16 / 9"
  label="A live ASCII koi pond"
/>;

Plain HTML

<ascii-koi
  seed="19"
  count="7"
  palette="paper"
  label="A live ASCII koi pond"
  style="display: block; width: 100%; height: 420px"
></ascii-koi>