Quick Start

A single function call handles everything: loading, pixel extraction, conversion, and rendering. No manual canvas setup required.

example.ts

import { asciify } from 'asciify-engine';

const canvas = document.querySelector('canvas')!;

// Minimal — convert from a URL
await asciify('https://example.com/photo.jpg', canvas);

// With a named art style preset
await asciify(document.querySelector('img')!, canvas, {
  artStyle: 'letters',
});

// Full options — max control
await asciify(img, canvas, {
  fontSize: 8,
  artStyle: 'art',
  options: {
    colorMode: 'fullcolor',
    invert: true,
    animationStyle: 'wave',
    hoverEffect: 'spotlight',
    hoverStrength: 0.5,
  },
});

Tip

For GIFs use asciifyGif(). For video use asciifyVideo() — live streaming by default, handles the display:none gotcha automatically, and accepts a fitTo container for responsive canvas sizing. Both return a stop() function.

ASCII Backgrounds

Mount a live animated ASCII canvas behind any element with one call.14 background types available — wave, rain, aurora, fire, dna, and more.

import { asciiBackground } from 'asciify-engine';

// Default wave type — auto light/dark, mouse-interactive
const { destroy } = asciiBackground('#hero', { opacity: 0.2 });

// Pick a specific background type
asciiBackground(containerRef.current, {
  type: 'aurora',
  opacity: 0.15,
  colorScheme: 'auto', // follows OS theme automatically
});

// Always clean up on unmount:
destroy();

→ All 14 background types with live previews and docs