Shaders
header.lightDarkMode D
Gallery

A retro CRT screen effect displaying a dense matrix of binary digits (0s and 1s) in a monospaced font. The overall aesthetic is a classic hacker/terminal interface with a dark navy-black background (#010b17, #040617). The text characters are rendered in multiple colors: red/magenta digits, cyan/light-blue digits, and bright lime-green digits (#bdfc3f) creating a vibrant, multi-colored data stream effect. The display exhibits characteristic CRT artifacts including horizontal scanlines running across the entire image at regular intervals, creating a striped pattern that adds authenticity to the vintage computer monitor appearance. The pixel size is large (74px), giving the display a blocky, pixelated quality. A subtle swirl distortion effect warps the background slightly, creating depth and movement. Godrays emanate from the right side (x:1, y:0.5) with a bright lime-green color (#bdfc3f), adding volumetric light rays that pierce through the digital data. A magenta sine wave (#ff00bc) undulates horizontally across the composition with soft edges, adding an additional layer of visual complexity. The brightness is elevated (2.5), making the overall image glow with intensity. The color shift effect (1.6) creates chromatic aberration-like distortions. The entire composition evokes a cyberpunk, hacker aesthetic with a nostalgic 1980s-90s computer terminal feel.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Ascii,
  CRTScreen,
  Godrays,
  SineWave,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <CRTScreen :brightness="2.5" :color-shift="1.6" :pixel-size="74" :scanline-frequency="150" :scanline-intensity="0.5">
      <Swirl :blend="55" color-a="#010b17" color-b="#040617" :detail="1.7" />
      <Ascii :cell-size="64" characters="01010101010101010101010101 " font-family="Space Mono" :spacing="0.4">
        <Godrays :center="{ x: 1, y: 0.5 }" :density="0.1" :intensity="0.9" ray-color="#bdfc3f" :speed="1.02" :spotty="0" />
        <SineWave :amplitude="0.06" color="#ff00bc" :frequency="0.6" :position="{ x: 0.5, y: 0 }" :softness="0.83" :thickness="0.09" />
      </Ascii>
    </CRTScreen>
  </Shader>
</template>