Enter The Matrix 4
Enter The MatrixA classic Matrix-style digital rain effect rendered on a dark background. The composition features cascading streams of Japanese katakana characters in bright neon green (#40ff5c) falling diagonally across the screen at approximately 44 degrees. The characters have a luminous glow effect with an intensity of 6.8, creating halos around each character that blend into the dark background (#0b1410). The falling lines have a trail length of 0.7, creating motion blur streaks behind the descending characters. A subtle CRT screen effect is applied with scanlines (intensity 0.1) and vignetting (intensity 0.1) at the edges, giving it an authentic cathode ray tube monitor appearance. The perspective is tilted at 21.9 degrees with a zoom of 1.4x, creating a sense of depth and three-dimensional space as if viewing the digital rain receding into the distance. The characters are spaced at 0.55 intervals with a cell size of 24 pixels, creating a dense but readable matrix of falling text. The overall atmosphere is cyberpunk and immersive, with the bright green characters providing stark contrast against the nearly black background, enhanced by the glow effect that creates a soft luminescent quality typical of neon signage in low-light environments.
Code
<script setup lang="ts">
import {
Shader,
Ascii,
CRTScreen,
FallingLines,
Glow,
Perspective,
SolidColor
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<SolidColor color="#0b1410" />
<Ascii :cell-size="24" characters="ハミヒーウシナモニサワツオリアホテマケメエカキムユラセネスタヌヘ" font-family="Geist Mono" :gamma="1.2" :spacing="0.55">
<FallingLines :angle="44" color-a="#40ff5c" color-b="#032103ff" color-space="oklab" :density="34" :speed="0.45" :speed-variance="1" :stroke-width="0.5" :trail-length="0.7" :visible="true" />
</Ascii>
<Glow :intensity="6.8" :size="2" :threshold="0.4" :visible="true" />
<CRTScreen :color-shift="0" :pixel-size="112" :scanline-frequency="100" :scanline-intensity="0.1" :vignette-intensity="0.1" :vignette-radius="0.35" :visible="true" />
<Perspective edges="wrap" :tilt="21.9" :zoom="1.4" />
</Shader>
</template>