Your system asks for reduced motion, so VFX-JS draws nothing. Demos on this site show plain HTML.
Type
MatrixParams
effects/src/matrix.ts:279 ↗import type { MatrixParams } from "@vfx-js/effects";Properties
background
background: MatrixColor
Cell backdrop behind the rain, non-premultiplied.
birthRate
birthRate: number
Drop spawn rate: how many new falling streams are born per second in each column. Higher values spawn drops frequently (a busy, dense downpour — drops overlap into near-continuous streams); lower values leave long gaps between drops (sparse, intermittent rain).
brightness
brightness: number
Overall gain on the rain brightness.
charAspect
charAspect?: number
Character box aspect ratio (width / height). Omit to auto-measure it from the font (advance over em height).
color
color: MatrixTrailColor
Trail colour — the classic phosphor green. Pass an array of two or
more MatrixColor stops for a gradient along each drop's trail
(first at the head, last at the tail end), interpolated in OKLCH. Pair
with tailFade: 0 to fade purely via the gradient.
contrast
contrast: number
Contrast of the source luminance, pivoting around mid-grey (0.5).
1 leaves the input unchanged; < 1 flattens it toward grey; > 1
deepens the split between dark and bright regions, so the picture
reads more sharply through the rain.
font
font: string
CSS font family used to render the glyph atlas.
fontWeight
fontWeight: string | number
CSS font weight for the glyph atlas ("normal", "bold", 100–900).
glyphs
glyphs?: MatrixGlyphs
Glyph pool rained down the columns, picked at random per cell.
Defaults to MATRIX_GLYPHS. Baked into the atlas at init();
change it (or font / fontWeight) then call
MatrixEffect.updateAtlas (or re-add the effect) to rebuild.
glyphSpeed
glyphSpeed: number
Glyph reshuffle rate in changes per second (0 = static glyphs).
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 keep
their native aspect (contain-fitted), so a non-square cell
letterboxes rather than stretching.
headColor
headColor: MatrixColor
Leading-glyph colour at the head of each stream (usually near-white).
invert
invert: boolean
Flip the source luminance (rain shows through dark areas instead).
seed
seed: number
Random seed for the rain pattern (per-column speed/phase and the glyph
sequence). Any number; the same seed always reproduces the same
pattern, so pin it (with VFX.setTime) for deterministic
snapshots / visual regression tests. 0 is the default look.
speed
speed: number
Base fall speed in cells per second. Per-column randomised ±50%.
tail
tail: number
Trail length in cells (how far the trail extends behind the head).
tailFade
tailFade: number
How much the trail dims toward its tail, in [0, 1]. 1 is the
classic bright-head / dim-tail falloff; 0 keeps the whole trail at
full brightness so you control the fade yourself via the colour
gradient (e.g. a color stop fading to transparent or black).