ASCII Peaks

Open in editor

A digital matrix-style effect featuring a dark navy background (#02090f) filled with repeating ASCII characters (O and 0) arranged in a grid pattern. The characters are rendered in bright cyan (#0fdcff) with a glowing, luminescent quality. The text appears to have diagonal striping applied at -28 degrees, creating alternating bands of bright cyan and dark navy through the character grid. Wave distortion effects create subtle vertical undulations across the entire composition, giving the characters a rippling, liquid-like appearance. Grid distortion adds additional warping and displacement, creating pockets of visual turbulence throughout the field. A strong glow effect with high intensity (9.44) and low threshold (0.12) causes the cyan characters to bloom and radiate outward, creating halos of light around each letter. The CRT screen effect adds a retro computer monitor aesthetic with scanlines (intensity 0.29 at 250 frequency), pixel grid artifacts (19px size), and color shift aberration (0.8), enhancing the vintage digital terminal appearance. The overall mood is cyberpunk and technological, evoking the aesthetic of digital rain or data streams in a hacker interface. The bright cyan glow against the nearly black background creates high contrast and visual intensity.

Code

vue

<script setup lang="ts">
import {
  Shader,
  Ascii,
  CRTScreen,
  Glow,
  GridDistortion,
  SolidColor,
  Stripes,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#02090f" />
    <Ascii :cell-size="33" characters="O0O0O0O0O0O0O0O0O0O0O0O0O0O0O0O0O0O0O0O0O0O0O0O0O0" font-family="Source Code Pro" :gamma="1.35" :spacing="0.75" :visible="true">
      <Stripes :angle="-28" :balance="0.3" color-a="#0fdcff" color-b="#030217" :density="1" :softness="0.5" :speed="0.1" :visible="true" />
      <WaveDistortion :angle="90" :frequency="4" :strength="0.59" :visible="true" wave-type="triangle" />
      <GridDistortion :grid-size="18" :intensity="5" :radius="3" :visible="true" />
    </Ascii>
    <Glow :intensity="9.44" :size="1.98" :threshold="0.12" :visible="true" />
    <CRTScreen :brightness="3" :color-shift="0.8" :pixel-size="19" :scanline-frequency="250" :scanline-intensity="0.29" :visible="true" />
  </Shader>
</template>