Shaders
header.lightDarkMode D
Gallery

A 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

vue
<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>