Enter The Matrix
Enter The MatrixA classic Matrix-style digital rain effect rendered with Japanese katakana characters falling diagonally from top to bottom at approximately 90 degrees. The composition features bright neon green glowing characters (#40ff5c) cascading downward against a very dark, nearly black background (#0b1410). The characters have a luminous quality with a strong glow effect (intensity 6.8) that creates bright halos around each character, making them appear to emit light. The falling lines have a trail effect with 0.7 length, creating streaking motion blur as characters descend. The overall scene is viewed from a tilted perspective (30-degree tilt) that gives the impression of looking down at the digital rain from an angle. A subtle CRT screen effect with scanlines (0.1 intensity) and vignetting (0.1 intensity) adds a retro computer monitor aesthetic. The spacing between character columns is consistent at 0.9 units, with 34 density lines creating a dense, immersive rain pattern. The color gradient transitions from bright lime green at the brightest points to dark forest green (#032103) in the trail portions, creating depth and motion perception. The overall mood is cyberpunk, technological, and atmospheric with a strong sense of digital movement and data flow.
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="25" characters="ハミヒーウシナモニサワツオリアホテマケメエカキムユラセネスタヌヘ" font-family="Geist Mono" :spacing="0.9">
<FallingLines color-a="#40ff5c" color-b="#032103ff" color-space="oklab" :density="34" :speed="0.45" :speed-variance="0.55" :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="30" :zoom="0.9" />
</Shader>
</template>