Drift background

GPU

Characters that drift slowly in broad lobes and stay clear around your content.

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, drift } from 'asciify-engine/kit';

const hero = document.querySelector('#hero');
const bg = background(hero, {
  preset: drift,
  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.