Ascii Wave 3

A dark, cyberpunk-themed shader effect featuring a deep navy-black background (#0b0f24) with horizontal wavy lines creating a digital scanline aesthetic. The composition consists of repeating rows of cyan-colored wavy patterns (~) interspersed with small asterisk (*) characters, creating a dense ASCII art texture. The waves appear to flow horizontally across the screen with a sinusoidal motion, rendered in bright cyan (#16ded7) with soft edges and moderate opacity. The characters are rendered in a monospace font (Space Mono) at regular intervals, creating a grid-like structure. A subtle film grain overlay adds texture and visual noise throughout the entire composition, enhancing the retro digital/terminal aesthetic. The overall effect suggests data streams, digital rain, or a computer terminal interface with an animated wave pattern moving through the ASCII characters. The cyan waves are masked to the ASCII layer, creating a cohesive visual relationship between the wave animation and the character display. The blend mode and layering create depth while maintaining the flat, digital aesthetic typical of cyberpunk or hacker-themed interfaces.

<script setup lang="ts">
import {
  Shader,
  Ascii,
  FilmGrain,
  Group,
  SineWave,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0b0f24" />
    <Group blend-mode="normal-oklch">
      <SolidColor color="#5413ed" :visible="true" />
      <SineWave id="idmh10tevmvxufaxu22" :amplitude="0.5" :angle="281" color="#16ded7" :frequency="16.7" :position="{ x: 0.5, y: 1 }" :softness="0.52" :thickness="2" :visible="true" />
      <Ascii :cell-size="25" characters="〜*" font-family="Space Mono" mask-source="idmh10tevmvxufaxu22" :visible="true" />
    </Group>
    <FilmGrain :strength="0.05" />
  </Shader>
</template>