Enter The Matrix 3

A classic Matrix-style digital rain effect rendered with a dark cyberpunk aesthetic. The composition features cascading streams of katakana characters (ﾊﾐﾋｰｳｼﾅﾓﾆｻﾜﾂｵﾘｱﾎﾃﾏｹﾒｴｶｷﾑﾕﾗｾﾈｽﾀﾇﾍ) falling vertically downward at a moderate speed of 0.45. The characters are rendered in a bright neon green (#40ff5c) that gradually fades to a dark forest green (#032103) at the trailing edges, creating a luminous tail effect. The background is a very dark near-black color (#0b1410), providing maximum contrast for the glowing text. A glow effect with intensity 6.8 creates a bright halo around each character, enhancing the neon aesthetic. The entire scene is viewed through a subtle CRT screen filter with scanlines and vignetting, adding a retro computer monitor quality. A perspective transformation with a 21.9-degree tilt creates a receding depth effect, making the falling characters appear to move away from the viewer in 3D space. The overall mood is cyberpunk, digital, and atmospheric with a strong sense of motion and technological immersion. The character spacing of 0.55 and cell size of 24 pixels create a dense but readable matrix of falling symbols.

Code

vue

<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="180" 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>