Fluid background

GPU

Flowing folds, fine ASCII characters and a soft wake that follows your cursor: the original Asciify hero, shipped as the fluid preset of background().

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

Add it to your page

Install asciify-engine and call background() with fluid. It draws under the section's content, follows light and dark, pauses off screen and holds a still frame for reduced motion. Defaults: 7px characters, speed 1, opacity 0.7, answers the pointer. It takes every option the other presets take; see the options table.

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

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

// On unmount:
bg.destroy();

Standalone source

To own the code instead, save all 15 files below into one folder next to the asciify-engine dependency. This version draws on the GPU when it can and falls back to Canvas 2D. It resizes with its container, stops off screen and in hidden tabs, and shows a still frame for reduced motion; destroy() releases its observers, listeners and loop.

fluid-background.ts fluid-field.ts water-surface.ts glyph-renderer.ts canvas-glyph-renderer.ts glyph-continuity.ts media-source.ts surface-finish.ts surface-edge.ts text-mask.ts ink-trail.ts ripple-field.ts contour-field.ts afterimage-field.ts hover-catalog.ts

index.html

<div id="background" style="position:relative;height:70vh;background:#080909">
  <canvas aria-hidden="true" style="position:absolute;inset:0;width:100%;height:100%"></canvas>
</div>

background.ts

import { mountFluidBackground } from './fluid-background';

const host = document.querySelector<HTMLElement>('#background')!;
const background = mountFluidBackground(host, host.querySelector('canvas')!);

// When your view unmounts:
// background?.destroy();