Faded Dither

A dark, minimalist shader effect featuring a near-black background with a subtle textured noise pattern. The base layer is a solid dark charcoal color (#121217) that provides the foundation. Overlaid on this is a dithering effect using a Bayer 8x8 pattern that creates a grainy, stippled texture across the entire canvas. The dither pattern alternates between transparent areas and slightly lighter dark gray pixels (#242424), producing a fine-grained, almost film-grain-like appearance. Embedded within this dithered layer is a subtle sine wave effect positioned in the lower-right quadrant (approximately 69% horizontally, 70% vertically). The sine wave appears as a soft, undulating white line with low amplitude and high softness (0.7), creating a gentle wave pattern at a 24-degree angle. The wave moves slowly (speed 0.4) with a frequency of 0.5, producing a smooth, organic motion. The overall effect is atmospheric and moody, with a grainy texture that suggests depth and subtle movement. The composition maintains high contrast between the dark background and the minimal white wave element, creating a sophisticated, tech-forward aesthetic.

<script setup lang="ts">
import {
  Shader,
  Dither,
  SineWave,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#121217" />
    <Dither color-b="#242424" pattern="bayer8" :threshold="0.41">
      <SineWave :angle="24" :frequency="0.5" :position="{ x: 0.69, y: 0.7 }" :softness="0.7" :speed="0.4" :thickness="0.4" />
    </Dither>
  </Shader>
</template>