Capillary background

GPU

Thin branching veins: a faint network at rest, new veins that grow toward the cursor and burst from a click.

Sound for slow mornings.Field recordings, mixed for deep work.

Add it to your page

Install asciify-engine and call background() on the section. It draws under the section's content, follows light and dark, pauses off screen and holds a still frame for reduced motion. Defaults: 8px characters, speed 1, answers the pointer.

import { background, capillary } from 'asciify-engine/kit';

const hero = document.querySelector('#hero');
const bg = background(hero, {
  preset: capillary,
  clear: hero.querySelector('.copy'),  // the field stays quiet round it
  cursor: false,                       // optional: no pointer response
});

// On unmount:
bg.destroy();

Options

Option	Type	What it does
`preset`	`BackgroundPreset`	Required. Import it by name; a page pays only for the presets it imports.
`clear`	`HTMLElement \| false`	The field fades out round it, following layout changes. Without it the preset keeps its own quiet middle.
`cursor`	`boolean \| 'trail' \| 'fluid' \| 'lantern'`	Pointer response. false turns it off, true keeps the preset's own, a name picks the hover. Default: on for presets that answer the pointer.
`mark`	`'glyph' \| 'dot'`	Characters or halftone dots. Default: the preset's own; a charset asks for characters.
`charset`	`string`	Characters from empty to dense, or a named set such as blocks, braille or dots.
`palette`	`string \| { light, dark }`	The ink, one colour or one per theme. Wins over color and ink. Default: the preset's graphite for the ground.
`ink, color`	`string`	One ink for both grounds: a CSS colour, a custom property (--brand) or var(--brand, #888).
`accent`	`string`	Peaks, heads and signals, for the presets that draw them. Default: the preset's own, or one mixed from the ink.
`cellSize, speed`	`number`	Character size (dot spacing for dots) in CSS px, and pace from 0 to 5. Default: the preset's own.
`opacity, dither`	`number`	Canvas opacity, 0 to 1 (default 1, Fluid 0.7), and ordered dither, 0 to 1 (default 0).
`text`	`string`	wordField only: the word drawn. Default ASCIIFY.
`look`	`GlyphFieldOptions`	Raw field settings on top, such as { mark: 'stipple' } for a render style or { scene: 'orb' } for wordField's orb.
`globalLook`	`boolean`	false keeps this background's own characters when setGlobalLook re-skins the page. Default true.
`lazy, poster`	`boolean, string`	Mount only near the viewport and release far off it (default true); a still image shown until the first frame, while released and without WebGL2.
`reducedMotion`	`boolean`	Overrides the visitor's prefers-reduced-motion; unset follows it, holding one still frame.

The handle: update(options), setPreset(preset) (cross-fades, keeping your options), play(), pause(), destroy() and supported (false without WebGL2). field is the GPU glyph field, or null without one: bg.field?.pulse() sends a ring through it.