Shaders
header.lightDarkMode D
Gallery

A 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

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