Effects · Gutenberg
Matrix Rain block for WordPress
Canvas-rendered Matrix-style digital rain with falling character columns. Fully customizable character set, colors, speed and overlay content.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Canvas-rendered Matrix-style digital rain with falling character columns. Fully customizable character set, colors, speed and overlay content.
Inspector panels on this block: Canvas, Characters, Custom Colors, Text Overlay, Overlay Colors, Interaction. Those titles come from index.js, not from a shared template.
Behavior controls: “Character set” options: Matrix (Katakana + digits), Binary (0 and 1), Hexadecimal, Latin alphabet, Custom; “Custom characters” (Type the characters to use (no spaces needed)); “Color preset” options: 🟢 Classic Green / White head, 🔵 Cyan / White head, 🔴 Red / Pink head, 🟡 Gold / White head, 🟣 Purple / White head.
Where to find it
Gutenberg inserter → Effects → search “Matrix Rain” (block name `blockenberg/matrix-rain` in block.json). Style it in the sidebar after insert.
How to use Matrix Rain block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Matrix Rain”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Canvas. Set “Height (px)”, “Speed”, “Density (%)”, “Fade trail length”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Height (px) | Numeric range control in the inspector. Range 100–900. block.json default: 400. Saved as `height`. |
| Speed | Numeric range control in the inspector. Range 1–100. block.json default: 50. Saved as `speed`. |
| Density (%) | Numeric range control in the inspector. Range 10–100. block.json default: 100. Saved as `density`. |
| Fade trail length | Numeric range control in the inspector. Range 1–80. block.json default: 20. Saved as `fadeLength`. |
| Glow effect | On/off toggle in the inspector. On by default. Saved as `glowEffect`. |
| Random start positions | On/off toggle in the inspector. On by default. Saved as `randomStart`. |
| Character set | Select control; the chosen value is saved on the block. Options: Matrix (Katakana + digits); Binary (0 and 1); Hexadecimal; Latin alphabet; Custom. block.json default: matrix. Saved as `charSet`. |
| Custom characters | Text field in the inspector. Type the characters to use (no spaces needed). block.json default: 01. Saved as `customChars`. |
| Canvas font size (px) | Numeric range control in the inspector. Range 8–40. block.json default: 16. Saved as `fontSize`. |
| Color preset | Select control; the chosen value is saved on the block. Options: 🟢 Classic Green / White head; 🔵 Cyan / White head; 🔴 Red / Pink head; 🟡 Gold / White head; 🟣 Purple / White head; 🌈 Rainbow columns; 🎨 Custom colors. block.json default: classic-green. Saved as `colorStyle`. |
| Background opacity (fade trail) | Numeric range control in the inspector. Range 1–40. block.json default: 8. Saved as `bgOpacity`. |
| Rain color | Color control in the inspector. block.json default: #00ff41. Saved as `primaryColor`. |
| Head (leading char) color | Color control in the inspector. block.json default: #ffffff. Saved as `headColor`. |
| Background color | Color control in the inspector. block.json default: #000000. Saved as `bgColor`. |
| Show text overlay | On/off toggle in the inspector. On by default. Saved as `showOverlay`. |
| Main text | Text field in the inspector. block.json default: THE MATRIX. Saved as `overlayText`. |
| Subtext | Text field in the inspector. block.json default: Follow the white rabbit.. Saved as `overlaySubtext`. |
| Overlay text color | Color control in the inspector. block.json default: #00ff41. Saved as `overlayTextColor`. |
| Overlay background | Color control in the inspector. block.json default: rgba(0,0,0,0.35). Saved as `overlayBg`. |
| Click to pause/resume | On/off toggle in the inspector. On by default. Saved as `clickToPause`. |
| Pause on hover | On/off toggle in the inspector. Off by default. Saved as `pauseOnHover`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- Drawing happens on a canvas element after the page loads.
When this is the right block
- Canvas-rendered Matrix-style digital rain with falling character columns. Fully customizable character set, colors, speed and overlay content — that is the job of Matrix Rain, not a generic content block.
- Use it when you need the editor control labeled “Height (px)”, which exists on this block’s inspector.
- It matches pages about matrix, rain, code.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Matrix Rain block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Matrix Rain”. It sits under Effects. After insert, open Canvas and set “Height (px)”, “Speed”, “Density (%)”, “Fade trail length”.
What makes Matrix Rain different from other Blockenberg blocks?
Canvas-rendered Matrix-style digital rain with falling character columns. Fully customizable character set, colors, speed and overlay content. Inspector labels on this block include “Height (px)”, “Speed”, “Density (%)”, “Fade trail length”.
Is the Matrix Rain Gutenberg block free?
Yes. Matrix Rain ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Matrix Rain to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Canvas, Characters, Custom Colors, Text Overlay).
Related effects blocks
Glitch Text
Eye-catching glitch animation text with chromatic aberration, noise, scanlines, and digital distortion effects.
Neon Text
Glowing neon tube text effect with animated flicker, multi-color glow layers, animated background scanlines, and multiple neon color presets.
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Gradient Blob
Full-width section with animated CSS gradient blobs as background and InnerBlocks for content.
Hover Card
Card that reveals hidden content (overlay) when hovered with customizable direction and animation.
Kinetic Text
Text characters that scatter outward and snap back on hover with smooth physics animation.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Matrix Rain from the Gutenberg inserter.