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

Class

AsciiEffect

import { AsciiEffect } from "@vfx-js/effects";

ASCII / glyph-mosaic effect.

Example

vfx.add(el, { effect: new AsciiEffect({ font: "Helvetica", grid: 16 }) });
vfx.add(el, { effect: new AsciiEffect({ chars: [" ", ".", "+", "#"] }) });
// Image tiles (dark → light), each keeping its own colour:
vfx.add(el, { effect: new AsciiEffect({ tiles: ["/0.png", "/1.png"] }) });

Glyphs keep their native aspect ratio regardless of the grid ratio: each is fitted (contain) into its cell, so a non-square cell letterboxes rather than stretching the character. Match grid to the font's character box (≈ advance : em) for gap-free tiling.

grid, color, background, colorFromSource, invert, and dither are live (read every frame). chars / tiles / font / fontWeight / charAspect are baked into the atlas at init() — after changing them via setParams, call AsciiEffect.updateAtlas (or re-add the effect) to rebuild.

Implements: Effect
Interface members: disposeinitrender

Constructors

new AsciiEffect()

new AsciiEffect(initial?: Partial<AsciiParams> = {}): AsciiEffect

Properties

params

params: AsciiParams

Methods

setParams

setParams(updates: Partial<AsciiParams>): void

updateAtlas

updateAtlas(): Promise<void>

Rebuild the atlas from the current params, applying changes to the baked fields (chars / tiles / font / fontWeight / charAspect) without removing and re-adding the effect. Async — it may load fonts or decode image tiles. No-op before init().

Allocates a fresh atlas texture and disposes the previous one once the swap is live, so repeated calls don't leak. Still does real work (rasterising / decoding), so prefer occasional calls (e.g. on a settings change) over per-frame use.