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

Class

MatrixEffect

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

"Digital rain" / Matrix-movie effect.

Example

vfx.add(el, { effect: new MatrixEffect({ grid: [12, 16] }) });
vfx.add(el, { effect: new MatrixEffect({ glyphs: "01", color: [0, 1, 0, 1] }) });

Splits the element into a grid and rains a random glyph down each column, with a bright leading tip and a fading green trail. The source image's grayscale is multiplied into the rain, so the picture emerges from the falling characters.

grid, color, headColor, background, speed, tail, tailFade, birthRate, glyphSpeed, brightness, contrast, invert, and seed are live (read every frame). glyphs / font / fontWeight / charAspect are baked into the atlas at init() — after changing them via setParams, call MatrixEffect.updateAtlas (or re-add the effect) to rebuild.

Implements: Effect
Interface members: disposeinitrender

Constructors

new MatrixEffect()

new MatrixEffect(initial?: Partial<MatrixParams> = {}): MatrixEffect

Methods

setParams

setParams(updates: Partial<MatrixParams>): void

updateAtlas

updateAtlas(): Promise<void>

Rebuild the atlas from the current params, applying changes to the baked fields (glyphs / font / fontWeight / charAspect) without removing and re-adding the effect. Async — it may load fonts. 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 rasterises the atlas, so prefer occasional calls (e.g. on a settings change) over per-frame use.