Your system asks for reduced motion, so VFX-JS draws nothing. Demos on this site show plain HTML.

Type

AsciiParams

effects/src/ascii.ts:193 ↗
import type { AsciiParams } from "@vfx-js/effects";

Properties

background

background: AsciiColor

Cell backdrop behind the glyphs, non-premultiplied.

charAspect

charAspect?: number

Character box aspect ratio (width / height) used to keep glyphs undistorted when the cell is non-square.

Omit (default) to auto-measure it from the font — the glyph advance (measureText) over the em height. That is exact for monospace fonts; set it explicitly for proportional fonts, non-browser builds, or to force a specific look (e.g. 0.5 for tall, narrow characters). Construction-time only (see chars).

chars

chars?: AsciiCharRamp

Character ramp, ordered dark → light. Overrides preset.

Baked into the glyph atlas at init(); changing it (or font / fontWeight) after the effect is added has no effect until it is re-added.

color

color: AsciiColor

Fixed glyph colour, used when colorFromSource is false.

colorFromSource

colorFromSource: boolean

Tint each glyph with the average colour of its source cell.

dither

dither: number

Ordered (Bayer 4×4) dithering amount, [0, 1]. 0 disables it; 1 spreads each quantisation step across a full ramp level so short ramps (e.g. minimal, dots) render smooth gradients instead of hard bands. Applied per cell, so each character stays consistent.

font

font: string

CSS font family used to render the glyph atlas (e.g. "monospace", "Helvetica"). Loaded via the Font Loading API before the atlas is built. Construction-time only (see chars).

fontWeight

fontWeight: string | number

CSS font weight for the glyph atlas — a keyword ("normal", "bold") or numeric weight (100–900). Construction-time only (see chars).

grid

grid: number | [number, number]

Cell size in CSS px. A single number is a square cell; a [width, height] tuple sets the axes independently.

Glyphs always keep their native aspect ratio — a cell wider/taller than the character box letterboxes the glyph rather than stretching it. Set the cell to the font's character aspect (≈ advance : em, so cells narrower than they are tall) for gap-free tiling.

invert

invert: boolean

Flip the luminance → glyph mapping (for dark-on-light output).

preset

preset: AsciiPresetName

Built-in ramp to use when chars is omitted.

tiles

tiles?: readonly AsciiImageSource[]

Image tiles, ordered dark → light — an alternative to character glyphs. Takes precedence over chars / preset when non-empty. Each tile keeps its own colour (the color RGB / colorFromSource tint is bypassed, though color's alpha still scales opacity), is contain-fitted into the cell at a shared aspect (taken from the first tile), and the atlas is auto-downscaled to stay within GPU texture limits.

Baked into the atlas at init(); change by re-adding the effect.