MatrixRain

The MatrixRain text effect generates a Canvas overlay inside a target container and paints falling columns of characters from a randomized symbol pool, driven dynamically by the AnimX loop ticks.

---

Standard Digital Green Rain

The color option sets the character drop color. fontSize determines the grid cell width and painted symbol scale.

60 FPS

---

Blue Code Stream (Longer Trail)

Reducing the fadeAmount parameter increases trail persistence, producing longer falling columns.

60 FPS

---

Crimson Alert Rain (Short Trail)

Increasing the fadeAmount values causes character columns to fade quickly, resulting in sharp, high-contrast drop heads.

60 FPS

---

Custom Binary Symbol Pool

The chars parameter accepts a custom string. Symbols are sampled randomly from this sequence during draw execution.

60 FPS

---

Dynamic Playback Control

The canvas animation can be paused and resumed using the .pause() and .resume() methods on the returned Timeline instance.

60 FPS

---

API Reference

import { matrixRain } from 'animx/plugins/Text'

const tl = matrixRain(target, config)

// To terminate the animation loop and remove the canvas overlay:
tl.kill()

Configuration Options

Option	Default	Description
chars	Katakana/Alphanumeric Sequence	String pool used to paint rain streams.
color	'#00ff33'	Drop character fill color.
fontSize	14	Column width grid cell size and text size in pixels.
fadeAmount	0.05	Trailing canvas overlay transparency (lower values yield longer trails).
zIndex	'1'	Overlay canvas z-index style property.
duration	5	Single loop timeline interval length in seconds.
repeat	-1	Loop iterations count. Default is -1 (infinite looping).
paused	false	Standard playback initialization lock flag.