A living field behind your page.
Pick a background, tune it live and take the code. Draw any of them in characters, dots or the studio’s 24 render styles, from blocks and braille to dither and print textures.
SwellA fine grid that swells in slow rolling waves, quiet in the middle. Dots by default, or characters.
Drawn on the GPU and kept quiet round the headline. Characters, dots or any of the 24 render styles; the header’s look reaches it too. Turn the pointer response off with cursor: false, and call field.pulse() on any event you want the page to answer.
Use this background with AI
Copy your background and its settings, then paste them into your coding agent to install and integrate it.
Your settings, as code.
The code follows the controls above, and the page beside it runs the same field behind real content. It pauses offscreen and holds still for reduced motion.
npm install asciify-engineimport { background, swell } from 'asciify-engine/kit';
// Drawn behind #hero's content; follows light and dark, pauses off screen,
// holds a still frame under reduced motion. cursor: false turns the pointer off.
const bg = background(document.querySelector('#hero'), {
preset: swell,
clear: document.querySelector('#hero .copy'),
});
// Let the page answer your interface, e.g. after a save:
// bg.field?.pulse({ element: saveButton });
// On unmount:
// bg.destroy();
Background API
background(element, options) from asciify-engine/kit draws behind the element's content and returns update, setPreset and destroy.
| Option | Type | Default | What it does |
|---|---|---|---|
preset | BackgroundPreset | None | Required. Import the preset you use, such as swell or halo, so the page pays only for it. |
palette | string | { light, dark } | graphite | Ink for the characters, one colour or one per theme. |
cellSize | number | per preset | Character size in CSS pixels; dot spacing in dots. Smaller is denser and costs more to draw. |
speed | number | per preset | Animation pace from 0 to 5, the Speed control above. |
charset | string | per preset | Characters from empty to dense, or a named set such as blocks or braille. |
mark | 'glyph' | 'dot' | per preset | Characters or halftone dots. A charset asks for characters. |
cursor | boolean | 'trail' | 'fluid' | 'lantern' | per preset | Pointer response. false turns it off; a name picks the hover style. |
look | GlyphFieldOptions | None | Raw field settings on top, such as { mark: 'stipple' } for a render style. |
clear | Element | None | Keeps the field quiet round your headline or copy, following layout changes. |
opacity | number | 1 | Opacity of the background, from 0 to 1. |
reducedMotion | boolean | system | Holds one still frame. Follows the visitor setting unless you set it. |