Ascii Wave 2
Ascii WaveA dark, atmospheric shader effect featuring a deep navy-black background (#060f1f) that transitions into a gradient of blue tones. The composition uses an ASCII art technique with wavy, undulating patterns created by tilde (~) and asterisk (*) characters in light cyan (#a8d5e2). These characters form horizontal wave lines that flow across the canvas with a sine wave distortion, creating a sense of motion and fluidity. The waves appear to emanate from the bottom-right corner and spread diagonally upward toward the top-left, with density decreasing as they move away from their origin point. The underlying blue base layer (#3a6b8c) provides depth and contrast. A subtle film grain texture overlays the entire composition at low opacity (0.05), adding a vintage, analog quality and slight visual noise. The overall effect creates a cyberpunk or retro-digital aesthetic with a sense of flowing energy or data streams. The spatial arrangement suggests depth through the gradient of character density, with denser patterns in the lower-right transitioning to sparse patterns in the upper-left.
Code
<script setup lang="ts">
import {
Shader,
Ascii,
FilmGrain,
Group,
SineWave,
SolidColor
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<SolidColor color="#060f1f" />
<Group blend-mode="normal-oklch">
<SolidColor color="#3a6b8c" :visible="true" />
<SineWave id="idmh10tevmvxufaxu22" :amplitude="0.26" :angle="36" color="#a8d5e2" :frequency="0.3" :position="{ x: 0.5, y: 1 }" :softness="0.52" :thickness="0.99" :visible="true" />
<Ascii :cell-size="25" characters="〜*" font-family="Space Mono" mask-source="idmh10tevmvxufaxu22" :visible="true" />
</Group>
<FilmGrain :strength="0.05" />
</Shader>
</template>