Matrix Rain

Open in editor

A classic Matrix-style digital rain effect featuring cascading columns of binary digits (0s and 1s) rendered in bright neon green against a nearly black background. The characters are displayed in a monospace font (Space Mono) with precise vertical alignment and consistent spacing. Each column of text appears to flow downward with a subtle sense of motion. The green characters exhibit a vibrant glow effect that creates a luminous halo around each digit, intensifying the cyberpunk aesthetic. Underlying the text layer is a diagonal stripe pattern with alternating bright green (#017000) and very dark green (#021702) bands that angle at -15 degrees, adding visual depth and texture. A grid distortion effect subtly warps the character grid with a radius of 2 pixels and intensity of 5, creating minor irregularities in the otherwise perfect alignment. The entire composition is enhanced with a CRT screen effect that simulates vintage cathode ray tube monitor characteristics, including scanlines running horizontally across the display at 250 frequency with 0.4 intensity, pixel-level color shifting (0.4 intensity), and brightness boost (2x). The overall mood is distinctly retro-futuristic and hacker-themed, evoking the visual style of the Matrix film franchise with its characteristic green-on-black digital aesthetic.

Code

vue

<script setup lang="ts">
import {
  Shader,
  Ascii,
  CRTScreen,
  Glow,
  GridDistortion,
  SolidColor,
  Stripes
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#040f07" />
    <Ascii :cell-size="22" characters="0000010101010101010101010101010101010101010101010101010" font-family="Space Mono" :spacing="0.7">
      <Stripes :angle="-15" :balance="0.4" color-a="#017000" color-b="#021702" :softness="0.6" :speed="0.1" />
      <GridDistortion :decay="1" :grid-size="21" :intensity="5" :radius="2" :swirl="0" />
    </Ascii>
    <Glow :intensity="20" :size="1" :threshold="0.02" />
    <CRTScreen :brightness="2" :color-shift="0.4" :scanline-frequency="250" :scanline-intensity="0.4" />
  </Shader>
</template>