Glyph field and ink field

Two canvas engines draw language as a material. The glyph field rains letters from eight scripts and condenses them into the word for language in one script after another. The ink field is its inverse for an ink band: paper glyphs rise slowly and keep a measured block of content clear. Both draw every glyph as a pre-measured sprite from one atlas and allocate nothing per frame.

The glyph fieldCopy Anchor Link

The plate runs createGlyphField with no copy block, so the rain runs edge to edge and the word prints in the middle. Drift turns the fall into a rise, Copy reserves a block on the left or across the top as a hero's text would take, and Glyph scale sizes the rain without changing the printed word. Each option is read once at mount, so every change remounts the engine, and Replay restarts it on the first script.

The status line follows the engine's onScript callback, which fires each time the field commits to the next script. The order is Han, Arabic, Devanagari, Cyrillic, Hangul, Greek, Thai and Latin, and each word is a real translation of "language".

Import and propsCopy Anchor Link

import { createGlyphField, SCRIPTS } from '@/lib/glyph-field';

const field = createGlyphField({
  canvas,
  drift: 'rise',
  copy: 'none',
  displayFamily: getComputedStyle(canvas).fontFamily,
  onScript: (index) => console.info(SCRIPTS[index]?.script),
});
field?.destroy();

The function returns { destroy }, or null when the canvas has no 2D context.

When to use itCopy Anchor Link

Use the glyph field behind a hero or a closing band whose subject is language, with the copy block reserved through copy and copyBottom. Its frame-time governor lowers the work per frame on a slow device, and it pauses offscreen, so it can stay mounted for the life of the page. Use the studio field for a texture that carries no words, and the ink field on an ink band.

Reduced motion and themesCopy Anchor Link

Under reduced motion the engine draws one frame, the printed word with its caliper, and never starts the loop. It pauses when the canvas leaves the viewport. Its ink is the --tc-ink token read off the canvas, and it reads the token again when html[data-theme] changes, so the rain turns from ink on paper to white on ink with the page. This plate sets --tc-ink from the docs theme's ink.

The ink fieldCopy Anchor Link

The plate runs createInkField in its interactive mode on an ink stage. Glyphs shiver as the pointer comes near, and a click bursts the nearest one, which pushes its neighbors aside before the field heals. Clearing switches between a flooded canvas and one that keeps a text block clear.

With the measured clearing the engine reads the block's box off the DOM and keeps the glyphs out of it, and the edge of the clearing is a dithered density falloff with no visible box.

Import and propsCopy Anchor Link

import { createInkField } from '@/app/d/glyph-rain/sections/band/inkField';

const field = createInkField({ canvas, clearEl: copyBlock, interactive: false, fpsCap: 30 });
field?.destroy();

When to use itCopy Anchor Link

Use the ink field on a closing band of ink around a content column, and set interactive only on a plate made for play, as this one is. A band's margins are decoration, so pass minWidth to park the field on a phone. The glyphs are paper on ink, so the field never goes on a paper ground.

Reduced motion and themesCopy Anchor Link

Under reduced motion the engine draws one composed frame and the pointer play is off. It pauses when the canvas leaves the viewport. Its glyphs are a fixed paper ink on an ink ground, so its plate stays dark in both themes.

TrapsCopy Anchor Link

• A canvas created with willReadFrequently lives in CPU memory, so every drawImage from it uploads to the GPU. The glyph atlas is read back with getImageData, and blitting from it directly was the rain's lag on phones, worst on WebKit. Each build now snapshots the finished atlas into an ImageBitmap and the frame loop blits from the snapshot (atlasSrc in src/lib/glyph-field.ts) (Canvas and WebGL engines).
• The rain once picked its quality tier from the window width, so a wide window on weak hardware got the heaviest tier. The governor judges windows of 120 counted frames after a 2.5 s warmup, skips any interval over 900 ms as a hidden tab, and trips when 35% or more of a window's frames exceed 22 ms, a sustained cadence under about 45 fps. Tier 1 lowers the pixel-ratio cap from 2 to 1.25, and tier 2 switches to the lean pool of 560 of the 1,280 glyphs. A first draft watched the median frame time and missed throttled hardware that missed the budget on 34% of its frames, so the governor counts slow frames (Canvas and WebGL engines).