Shaders
header.lightDarkMode D
Gallery

A dark, atmospheric shader effect dominated by a subtle dithering pattern overlaid on animated plasma noise. The image displays a predominantly black background (#121214) with sparse lighter gray pixels (#202124) creating a fine granular texture across the entire canvas. The dither pattern uses an 8x8 Bayer matrix at 7-pixel size, producing a characteristic checkerboard-like stippling effect with low opacity spread. Beneath this dithering layer, a plasma effect generates organic, flowing patterns with white (#ffffff) and black (#000000) color transitions, creating subtle luminous regions that appear to undulate and shift. The plasma has moderate density (0.3) and high contrast (0.9), producing soft, cloud-like formations that are barely visible through the dither overlay. A square wave distortion effect further warps the composition with a frequency of 1.8 and 256-degree angle, creating subtle vertical and horizontal rippling that adds dimensional complexity. The overall mood is dark, technological, and slightly chaotic, with a noisy, grainy aesthetic reminiscent of analog television static or digital noise. The effect maintains full opacity while using alpha masking, creating a seamless blend of all three shader components into a cohesive, moody visual texture.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Dither color-a="#121214" color-b="#202124" pattern="bayer8" :pixel-size="7" :threshold="0.41">
      <Plasma color-a="#ffffff" :contrast="0.9" :density="0.3" :intensity="1.3" :speed="1" />
      <WaveDistortion :angle="256" edges="mirror" :frequency="1.8" :strength="1" :visible="true" wave-type="square" />
    </Dither>
  </Shader>
</template>