Inkpond · an ink-wash background of Chinese glyphs for the web

SIX SCROLLS

Ink wash laid behind the page.
Glyphs dense or sparse by stroke count; the pointer is wind, a click is ink.

Hills山水 Shanshui

Two ranges of distant hills with mist drifting past their slopes. The quietest scroll, and the default.

Sweep for ripples
Click to drop ink
Mist drifts by itself

Depthscene="shanshui"

Lotus荷塘 Lotus Pond

A lotus pond seen from above. Koi swim around the page content, scatter when you come near and race to where ink drops.

Koi avoid you
Ink draws the koi
They hide under leaves

TintDepthscene="lotus"

Qingming清明上河 Along the River at Qingming

The scroll unrolls to the left: city walls under the mountains, a pagoda, taverns with flags along both banks, and a timber rainbow bridge arching from the near bank over the river, its foot crowded with a market while a big boat lowers its mast.

The scroll unrolls
Boatmen pole
Ink scatters walkers

TintDepthscene="qingming"

Solar Terms二十四节气 The 24 Solar Terms

A picture for each of the twenty-four solar terms, chosen by today's date: ice cracking at the Start of Spring, frogs' calls ringing across the pond, geese shifting formation, frost growing in from the edges, one vermilion sun in the longest night. Keep the page open into the next term and it bleeds over in ink.

Follows the date
Each term answers ink
term pins one

TintDepthscene="jieqi"

Whale北冥 The Northern Deep

The open sea from above. A whale's shadow glides beneath the swell, rising toward the light and sinking out of sight about once a minute; when it swims shallow it leaves flat calm footprints on the surface.

Rises and sinks
Touch it, it dives
Ink draws it

TintDepthscene="beiming"

Big Fat Whale大肥鲸 The Big Fat Whale

A very round whale and a bowl of white rice, the rice left as bare paper. Hungry, it buries its face in the bowl and swells as it eats; full, it burps, spouts rice from its blowhole and goes flat again.

Eats, swells, burps
Poke it, it laughs
Ink scatters rice

TintDepthscene="dafeijing"

USAGE

React

import { InkPond } from "inkpond/react";
import "inkpond/inkpond.css";

<main style={{ position: "relative" }}>
  <InkPond scene="qingming" />
  <h1 data-inkpond-avoid="">What shall we make today?</h1>
</main>

Vanilla

import { createInkPond } from "inkpond";
import "inkpond/inkpond.css";

const pond = createInkPond(canvas, { scene: "lotus" });
pond.ripple(x, y, 0.6); // stir the water
pond.drop(x, y);        // drop ink

The canvas fills its nearest positioned parent; elements with data-inkpond-avoid keep a clear zone, and koi, boats and walkers steer around them.

PERFORMANCE

0: runtime dependencies
0.7: ms / frame of script on calm water
1.9: ms / frame p95, the whole screen stirred
6–29: KiB glyph subset per scene, loaded on demand
30: seconds idle and it stops; the next input wakes it

Every frame only copies from a prerasterised glyph atlas; still parts are computed once per size and slow layers every 4 frames; slow devices step down to lite or a still picture, and hidden tabs pause.

Ink wash laid behind the page.Glyphs dense or sparse by stroke count; the pointer is wind, a click is ink.