Caustics background

GPU

Light through moving water: soft filaments that interlace and pool where they cross.

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: 11px characters, speed 1, answers the pointer.

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

const hero = document.querySelector('#hero');
const bg = background(hero, {
  preset: caustics,
  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`	`Element`	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; a name picks the hover.
`mark`	`'glyph' \| 'dot'`	Characters or halftone dots. A charset asks for characters.
`charset`	`string`	Characters from empty to dense, or a named set such as blocks or braille.
`palette`	`string \| { light, dark }`	The ink, one colour or one per theme. Default: graphite for the ground.
`cellSize, speed, opacity`	`number`	Character size in CSS px, pace from 0 to 5, and canvas opacity.
`look`	`GlyphFieldOptions`	Raw field settings on top, such as { mark: 'stipple' } for a render style.

Methods: update(options), setPreset(preset) (cross-fades), play(), pause(), destroy(); field.pulse() sends a ring through it.