Ascii Wave 4
Ascii WaveA 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
<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>