Shaders
header.lightDarkMode D
Gallery

A gradient dither effect transitioning from bright lime green on the left to purple-blue on the right. The image uses a Bayer 8x8 dithering pattern with 7-pixel blocks to create a pixelated, halftone appearance. The dither pattern becomes progressively denser and more visible toward the right side, creating a smooth tonal transition. Underlying the dither is a subtle plasma effect with white-to-black coloration that adds organic noise and texture. A square wave distortion with 84-degree angle and 1.8 frequency creates subtle horizontal rippling across the surface, visible as slight undulations in the dot pattern. The overall effect has a retro digital aesthetic with a noisy, grainy quality. The left side is relatively clean and solid, while the right side becomes increasingly complex with tighter dot clustering. The blend mode is normal with full opacity, creating a flat, non-blended appearance.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Dither color-a="#57e447" color-b="#8a54f9" 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="84" edges="mirror" :frequency="1.8" :strength="1" :visible="true" wave-type="square" />
    </Dither>
  </Shader>
</template>