Shaders
header.lightDarkMode D
Gallery

Dither Wave 12

Dither Wave

A dithered gradient shader effect transitioning from teal-green in the bottom-left corner to bright yellow-lime in the upper-right area. The dithering uses a Bayer8 pattern with 5-pixel squares, creating a characteristic checkerboard-like pixelated appearance throughout the composition. The color transition is smooth yet granular, with the dither pattern becoming more pronounced in areas of color transition. A subtle sine wave element with white coloring and high softness (0.79) is layered beneath, creating gentle undulating distortions at a 169-degree angle, though its effect is minimal due to low amplitude (0.1) and is mostly obscured by the dominant dither effect. The overall mood is vibrant and energetic with a retro digital aesthetic. The threshold value of 0.32 creates distinct color banding within the dither pattern, emphasizing the separation between the teal and yellow color zones. The composition maintains full opacity with normal blend mode, resulting in a clean, unblended appearance.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Dither color-a="#248375" color-b="#eaff4a" pattern="bayer8" :pixel-size="5" :threshold="0.32" :visible="true">
      <SineWave :amplitude="0.1" :angle="169" :frequency="0.7" :softness="0.79" :thickness="0.7" />
    </Dither>
  </Shader>
</template>