Matrix Screensaver Simulator

Matrix profile

{{ canvasSizeLabel }} canvas

Theme {{ themeLabel }} Density {{ densityLabel }} Speed {{ speedValue.toFixed(2) }}x {{ directionLabel }} Wave {{ waveLabel }} Columns {{ columnCount }}

Theme:

Options: classic green, cyan neon, amber terminal, or violet grid.

Character set:

Options: mixed symbols, binary, hex, ASCII letters, or katakana style.

Rain direction:

Choose Downward for the classic Matrix flow or Upward for reversal.

Density:

Use Low for large glyphs, Ultra for tightly packed rain.

Drop speed: {{ speedValue.toFixed(2) }}x

Range: 0.30x to 3.00x; start below 1.00x for ambient loops.

Glow intensity: {{ glowValue }}

Range: 0 to 100; lower values preserve crisp glyph lanes.

Tail persistence:

Enter 8 to 60 frames; longer tails create deeper afterimages.

frames

Character scale: {{ charScaleValue }}%

Range: 70% to 180%; larger glyphs reduce effective column count.

Head brightness: {{ headIntensityValue }}

Range: 0 to 100; raise it when dense tails hide the stream heads.

Random flicker:

Switch off for stable captures; on for livelier code rain.

Flicker rate: {{ flickerRateValue }}

Range: 0 to 100; disabled automatically when Random flicker is off.

Column motion:

Choose Straight for fixed lanes, Sine or Turbulent for drift.

Wave strength: {{ waveStrengthValue }}

Range: 0 to 100; disabled while Column motion is Straight.

Respawn frequency: {{ resetFrequencyValue }}

Range: 120 to 980; lower values refresh lanes more often.

Background noise:

Switch on for subtle texture; off for cleaner glyph contrast.

Background dim: {{ backgroundDimValue }}

Range: 0 to 80; raise for sharper contrast, lower for longer tails.

Scanline strength: {{ scanlineStrengthValue }}

Range: 0 to 100; higher values increase the reported noise load.

Frame rate:

Choose 30, 45, or 60 FPS for target rain playback.

Metric	Value	Copy
{{ row.key }}	{{ row.value }}

No chart-ready metrics are currently available.

Priority	Operator cue	Rationale	Copy
{{ cue.priority }}	{{ cue.cue }}	{{ cue.rationale }}

Embed:

Customize

Include current inputs

Size

Advanced

Width

Height

Aspect ratio

Max height

Collapsible embed

Allow fullscreen

Referrer policy

Sandbox tokens

Matrix-style code rain is a generative typography effect built from many narrow streams of changing glyphs. The familiar look comes from a few simple visual cues working together: vertical lanes, bright leading characters, dimmer trailing characters, a dark field, and enough timing variation that the pattern feels alive instead of tiled.

The effect is often used as a desktop screensaver, a stream background, a projection loop, a themed event display, or a short visual texture in a video edit. Those situations do not need the same rain. A calm background needs readable spacing and restrained flicker. A stage wall can carry heavier glow and denser streams. A screen overlay needs clean empty areas so titles, faces, or interface elements remain legible.

Glyph lanes: The vertical paths that make the rain readable as columns instead of random scattered characters.
Stream heads: The brighter leading marks that tell the eye where each column is moving.
Trail fade: The afterimage behind each stream. Longer trails add depth, but too much persistence can turn separate columns into a green haze.
Cadence: The perceived rhythm of movement, including travel speed, frame rate, and how often glyphs change.

Most weak code-rain loops fail in one of two ways. Some are too sparse, so the scene looks like falling text rather than a rain field. Others are overloaded with glow, noise, and speed, so the viewer sees a bright texture but cannot follow individual lanes. The useful middle is not always the brightest or fastest version. It is the version that holds its shape while moving.

Diagram showing code rain lane spacing, trail fade, bright heads, and motion cadence.

Motion also changes how the effect should be judged. A still frame can make dense rain look impressive, then the moving version reveals stutter, muddy trails, or distracting flicker. Long-running visual loops should stay readable over time, avoid unnecessary flashing, and give viewers a way to pause or stop motion when it is competing with other content.

A generated code-rain scene is best read as a controllable visual texture, not as a faithful film asset or a graphics benchmark. Exact column positions can change from one reset to the next. Compare versions by spacing, cadence, contrast, and delivered smoothness rather than by a single frozen pattern.

How to Use This Tool:

Start with the broad look, then tune motion and readability while the canvas is running.

Choose Theme, Character set, and Rain direction. These set the color palette, glyph pool, and whether streams fall downward or rise upward.
Set Density, Drop speed, Character scale, and Frame rate. Watch the preview for crowded lanes, overly fast motion, or a measured frame rate below the selected target.
Use Glow intensity, Tail persistence, Head brightness, and Background dim to separate leading glyphs from fading trails.
Add texture with Random flicker, Flicker rate, Column motion, Wave strength, Respawn frequency, Background noise, and Scanline strength. If the rain becomes hard to read, reduce texture before increasing glow.
Use Start or Pause when judging motion, and use Reset to rebuild the column pattern while keeping the selected controls.
Check Matrix Metrics for target FPS, measured FPS, quality scale, columns, canvas size, and fullscreen state. Open Matrix Stream Chart for a bar-chart snapshot of the current numeric signals.
Use Fullscreen for the final check. A larger canvas can expose frame-rate drops or crowded lanes that are less obvious in the smaller preview.

Out-of-range restored values are clamped to supported limits. If a shared or bookmarked setup looks different than expected, confirm the visible control values before comparing the result.

Interpreting Results:

Measured FPS and Quality scale are the main performance pair. Target FPS is the selected playback cap, while measured FPS reflects what the browser is delivering for the current canvas size and effect load. Quality scale shows whether the preview has reduced drawing resolution to protect smoothness.

Columns rises when the canvas is wider, density is higher, or characters are smaller. More columns add richness but make lane spacing tighter.
Matrix Stream Chart is a current snapshot, not a history graph. Use it to compare current signal levels, not to diagnose long-term performance trends.
Operator Brief gives three practical cues for stream vector, visual noise, and contrast. It is guidance for tuning, not a pass or fail verdict.
Scanline strength affects metrics, JSON state, and advisory cues. It should not be treated as proof that a separate visible scanline mask has been drawn.
Fullscreen changes the test conditions because the canvas can grow. Recheck measured FPS and lane clarity after entering fullscreen.

For background use, prefer a scene that stays readable for several seconds without demanding attention. For a short cinematic moment, stronger glow, faster motion, or heavier texture may be acceptable if the scene is not expected to sit behind readable text.

Advanced Tips:

Judge Density together with Character scale. A high density with small glyphs increases Columns quickly, while larger glyphs can keep the same mood readable with fewer lanes.
Use Random flicker and Background noise sparingly when the scene will sit behind text. If Operator Brief reports Manage visual noise, lower one texture setting before increasing glow.
Match Frame rate to the display job. A 30 FPS target often works for a calm background, while 60 FPS should be checked in fullscreen before using dense rain or turbulent motion.
Compare Measured FPS and Quality scale after each major change. A quality value below 100% means the preview is reducing drawing resolution to keep motion smooth.
Use Matrix Stream Chart as a snapshot of current numeric signals, then return to the live preview for the final readability check.

Technical Details:

Code rain is a column simulation. Each lane advances along the canvas, chooses glyphs from the selected character pool, and may drift sideways when a wave mode is active. Column count comes from the canvas width, density, and character scale. Smaller glyphs and denser spacing produce more lanes, while larger glyphs produce fewer, easier-to-read streams.

The trail is created by drawing a translucent dark frame over the previous frame before drawing the next glyph pass. Longer tail persistence reduces the fade amount, so earlier glyphs remain visible for more frames. Background dim increases the fade amount, which shortens afterimages and can make the scene sharper. Glow and head brightness then separate the stream head from its trail.

Frame cadence depends on both the selected target and the browser's animation timing. Browser animation callbacks usually align with display refresh, can pause in hidden tabs, and still need the scene to skip frames when a lower FPS cap is selected. The quality scale responds to measured performance: when measured FPS falls well below target, drawing resolution can step down toward 70%; when performance recovers, it can step back toward full resolution.

Rule Core:

The advisory cues combine motion pressure, noise pressure, and contrast conditions. They are deliberately simple so the next tuning action is easy to understand.

\begin{array}{lcl} vector load & = & drop speed \times density factor \\ noise load & = & flicker contribution + background noise contribution + \frac{scanline strength}{180} \end{array}

Matrix advisory cue thresholds
Cue area	Rule	Practical meaning
Density factor	Low and Medium use 1.00, High uses 1.18, Ultra uses 1.35	Dense rain raises motion pressure even when speed stays the same.
Stream vector	Vector load above 2.55, or Turbulent motion with Wave strength above 72	The scene may need less speed, less density, or gentler lateral movement.
Stream vector	Straight motion with Wave strength below 12	The rain is stable but may feel flat; slight sine motion can add depth.
Noise floor	Noise load above 1.20	Flicker, background speckle, and scanline pressure are stacked too heavily.
Noise floor	Flicker off, background noise off, and Scanline strength below 10	The field may look too plain for a terminal-style backdrop.
Contrast	Background dim above 60 with Glow intensity above 72	Bloom and dark blending can crush trail detail.
Contrast	Background dim below 18 with Head brightness below 55	Leading glyphs can blend into their trails.

Matrix output fields and interpretation
Output	What it measures	How to use it
Target FPS	The selected frame-rate cap: 30, 45, or 60 FPS.	Choose lower values for calmer loops or devices with less headroom.
Measured FPS	The delivered frame rate from the running preview.	Watch for gaps between target and delivered motion after changing density, glow, or fullscreen size.
Quality scale	The adaptive drawing percentage used to protect frame rate.	A value below 100% means the scene is trading resolution for smoother motion.
Columns	The current number of glyph lanes across the canvas.	Use it as a crowding signal when comparing character scale and density choices.
Canvas size	The current preview dimensions in CSS pixels.	Compare small preview and fullscreen behavior under different canvas loads.

The scene is generated in the browser from the selected settings. Resetting rebuilds positions, glyph choices, motion phases, and frame counters, so two resets with the same controls can produce different column arrangements while keeping the same overall profile.

Limitations and Privacy:

Code-rain screensavers are generated visual loops, not exact reproductions of a film asset or a stable graphics benchmark. The same settings can produce a different column arrangement after Reset, reload, or a later browser session.

Measured FPS depends on canvas size, fullscreen state, display refresh behavior, device load, and browser animation timing.
Quality scale is an adaptive drawing signal, not a pass or fail grade for the device.
Strong flicker, glow, and moving text can distract some viewers. Use Start and Pause to stop motion when judging or presenting the scene.
Scene generation, metrics, chart data, and JSON output are produced in the browser; selected rain settings are not uploaded for remote calculation.

Worked Examples:

Readable Ambient Rain

Use Classic green, Mixed symbols or ASCII letters, Downward direction, Medium density, 0.75x speed, Straight motion, Tail persistence around 24 frames, Glow intensity around 45, Head brightness around 85, Background noise off, and 45 FPS. Measured FPS should stay close to target and Quality scale should remain near full.

Dense Display-Wall Loop

Use Violet grid or Cyan neon, Katakana style or Mixed symbols, Ultra density, speed above 2.00x, Turbulent motion, Wave strength above 70, Random flicker on, Background noise on, and 60 FPS. If Operator Brief shows Lock stream vector or Manage visual noise, reduce density or wave strength before adding more glow.

Crowded Fullscreen Recovery

If the small preview looks sharp but fullscreen shows crowded lanes, a lower Quality scale, or a Measured FPS gap, reduce Density from Ultra to High, lower Drop speed toward 1.40x, or soften Wave strength before changing the palette. Recheck Matrix Metrics after the fullscreen canvas settles.

FAQ:

Which character sets are available?

The choices are Mixed symbols, Binary, Hex, ASCII letters, and Katakana style. Binary and Hex look cleaner at high density, while Mixed symbols and Katakana style create a busier code-rain texture.

Why does Measured FPS not match Target FPS?

Target FPS is the selected cap. Measured FPS depends on canvas size, device load, browser timing, density, glow, wave motion, background noise, and whether the preview is in fullscreen.

What changes when I press Reset?

Reset rebuilds the rain pattern, clears frame counters, and starts measuring again. The selected controls remain in place, but exact column positions and glyph choices can change.

Why do I not see distinct scanlines?

Scanline strength is included in metrics, JSON, and advisory cues. It is not a promise that a separate visible horizontal scanline overlay will appear in the preview.

Are my Matrix rain settings uploaded for processing?

Scene generation, metrics, chart data, and JSON output are produced in the browser. The simulator does not send your chosen rain settings to a server for calculation.

Glossary:

Glyph: One visible character drawn from the selected character set.
Stream head: The brighter leading character that makes a falling or rising column easy to follow.
Tail persistence: The number of prior frames that remain visible as fading trails.
Vector load: The combined speed and density pressure used by the stream-motion advisory cue.
Noise load: The combined flicker, background noise, and scanline pressure used by the noise advisory cue.
Quality scale: The adaptive drawing percentage used when the preview needs to protect frame rate.

References:

Canvas API, MDN Web Docs, Jul 17, 2025.
Window: requestAnimationFrame() method, MDN Web Docs, Dec 26, 2025.
Fullscreen API, MDN Web Docs, Mar 26, 2026.
Understanding Success Criterion 2.2.2: Pause, Stop, Hide, W3C Web Accessibility Initiative, updated Jun 7, 2023.