Shaders
header.lightDarkMode D
Gallery

A dark, cyberpunk-themed shader effect featuring a deep navy-black background (#0b0f24) with a dense grid pattern of wavy horizontal lines in cyan (#16ded7) and white. The lines are created by ASCII characters (〜 and *) arranged in a repeating pattern across the entire canvas. Overlaid on this grid are animated sine waves at a 157-degree angle that create a flowing, undulating motion through the character field. The waves have a soft, feathered edge with 0.52 softness, giving them a glowing, ethereal quality. The cyan waves appear to modulate the visibility of the ASCII characters beneath them, creating a masking effect where characters are more visible within the wave paths. A subtle purple (#5413ed) color layer sits beneath the wave effect, adding depth. The entire composition is overlaid with a fine film grain texture at 0.05 strength, creating a subtle noise pattern that enhances the digital, retro-computer aesthetic. The effect has a strong vertical flow with the waves moving diagonally, creating a sense of motion and energy. The overall mood is technological, mysterious, and reminiscent of 1980s-90s computer graphics or digital rain effects.

Code

vue
<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.4" :angle="157" 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>