Shaders
header.lightDarkMode D
Gallery

Enter The Matrix 2

Enter The Matrix

A classic Matrix-style digital rain effect rendered on a dark terminal interface. The composition features cascading streams of katakana characters (ハミヒーウシナモニサワツオリアホテマケメエカキムユラセネスタヌヘ) falling vertically across the screen at varying speeds and densities. The characters are rendered in a bright neon green (#40ff5c) with a darker green trail (#032103ff) creating a luminous tail effect as they descend. The background is a very dark, nearly black color (#0b1410) providing maximum contrast. A glow effect with high intensity (6.8) and threshold of 0.4 creates a bright halo around the brightest characters, enhancing the neon aesthetic. The entire scene is viewed through a subtle CRT screen filter with scanlines (intensity 0.1) and vignetting (0.1 intensity with 0.35 radius), adding a retro cathode-ray tube monitor appearance. A perspective transformation with a 21.9-degree tilt and 1.4x zoom creates a slight 3D depth effect, making the falling characters appear to recede into the distance. The overall mood is cyberpunk and dystopian, evoking the iconic visual style of digital surveillance and hacking culture. The spacing between characters is set to 0.55 with a cell size of 24 pixels, creating a readable but dense grid pattern.

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