v1.0.54·MIT License

asciify-engine

Framework-agnostic ASCII art engine for the browser. Convert images, GIFs, and videos into live ASCII art rendered on HTML canvas.

npm install asciify-engine
Playground →
Backgrounds ↗
04

Options

The AsciiOptions object controls every aspect of conversion and rendering. Start from DEFAULT_OPTIONS and override what you need.

ts
import { DEFAULT_OPTIONS, ART_STYLE_PRESETS } from 'asciify-engine';

const options = {
  ...DEFAULT_OPTIONS,
  ...ART_STYLE_PRESETS.terminal,
  fontSize: 8,
  colorMode: 'fullcolor',
};

Core

OptionTypeDefaultDescription
fontSizenumber10Character size in pixels. Controls grid density — smaller = denser grid.
charSpacingnumber1Multiplier applied to cell width and height.
charsetstring' .:-=+*#%@'Character ramp: first char = lightest luminance, last = darkest.
renderMode'ascii' | 'dots''ascii'Render as ASCII characters ('ascii') or filled dot circles ('dots').
invertbooleanfalseInvert luminance mapping — swap light and dark assignment.
customTextstring | undefinedundefinedTile a custom string across all cells instead of the charset ramp.

Color

OptionTypeDefaultDescription
colorMode'grayscale' | 'fullcolor' | 'matrix' | 'accent''grayscale'grayscale = brightness-mapped, fullcolor = source pixel color, matrix = green terminal look, accent = accent color on intensity peaks.
accentColorstring'#d4ff00'Color applied to peak-intensity cells when colorMode is "accent".

Image adjustments

OptionTypeDefaultDescription
brightnessnumber0Brightness offset applied before charset mapping. Range: -1 to 1.
contrastnumber0Contrast adjustment. Range: -1 to 1.
ditherStrengthnumber0Bayer ordered dither intensity. Range: 0 to 1.
dotSizeRationumber0.8Dot circle radius as a fraction of cell size. Dots renderMode only.
charAspectnumber0.55Width ÷ height of a single output character. Must match your rendering env: 0.5 for most terminals, 0.52 for browser line-height 1.15, 0.55 for line-height 1.09. Controls how many rows vs cols are generated so output has correct proportions.
normalizebooleanfalseAuto-stretch the luminance range of the frame before charset mapping. Maximises detail for low-contrast or muted images.

Animation

OptionTypeDefaultDescription
animationStyleAnimationStyle'none'Per-cell animation during rendering. Values: 'wave' | 'pulse' | 'rain' | 'breathe' | 'sparkle' | 'glitch' | 'spiral' | 'typewriter' | 'scatter' | 'waveField' | 'ripple' | 'melt' | 'orbit' | 'cellular'.
animationSpeednumber1Speed multiplier for all animation effects.

Hover effects

OptionTypeDefaultDescription
hoverEffectHoverEffect'spotlight'The effect near the cursor. Values: 'spotlight' | 'magnify' | 'repel' | 'glow' | 'colorShift' | 'attract' | 'shatter' | 'trail'.
hoverStrengthnumber0Hover effect intensity. 0 = disabled. Typical range: 0.3–0.8.
hoverRadiusnumber0.5Hover influence radius in normalized canvas coordinates (0–1).
hoverColorstring'#ffffff'Secondary color used by colorShift and glow effects.

Hover presets

Shorthand spreads that configure hoverEffect, hoverStrength, and hoverRadius together.

gravity

Pulls characters toward the cursor with smooth falloff.

shatter

Radial scatter outward with random jitter per cell.

ghost

Color-blended trail that smoothly follows the cursor.

ts
import { HOVER_PRESETS, DEFAULT_OPTIONS } from 'asciify-engine';

const options = { ...DEFAULT_OPTIONS, ...HOVER_PRESETS.gravity };
// Equivalent to:
// { hoverEffect: 'attract', hoverStrength: 0.6, hoverRadius: 0.4 }
Buy Me A Coffee