Shaders
header.lightDarkMode D
Gallery

A dark, atmospheric digital composition featuring a deep navy-black background (#0b0f24) that creates a night-like ambiance. The central focus is a large rectangular area filled with cyan-colored asterisk characters (*) arranged in a dense grid pattern, creating a pixelated or ASCII art effect. The cyan characters (#16ded7) are bright and luminous against the dark background, producing a strong contrast. Overlaying this grid is a series of horizontal wavy lines in dark blue/purple tones that flow from left to right, creating a sine wave pattern with smooth, undulating curves. These waves appear to act as a mask or boundary for the ASCII characters, causing them to fade in and out along the wave contours. The waves have a soft, feathered edge quality with moderate softness (0.52), giving them a slightly blurred appearance. The overall effect suggests digital data flow or a technological visualization, with the combination of static ASCII characters and dynamic wave patterns creating a sense of movement and energy. A subtle film grain texture overlays the entire composition, adding a slight noise and vintage digital quality. The composition has a cyberpunk or hacker aesthetic, with the bright cyan glowing characters creating an almost neon-like quality against the dark void.

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.26" :angle="36" color="#16ded7" :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>