Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect displaying diagonal striped patterns composed of pixelated dot matrices against a deep purple background. The image features two prominent diagonal bands - one in the upper left and one in the lower right - that appear to be constructed from small square pixels arranged in a dithered pattern. The left band exhibits a more magenta-pink hue while the right band maintains a cooler purple tone. The dithering creates a grainy, stippled texture throughout the bands, with varying pixel density that creates depth and dimension. The effect uses a Bayer8 dithering pattern with 7-pixel sizing, creating a characteristic halftone-like appearance. Underlying the dithered effect is a plasma distortion that generates organic, flowing variations in the pixel patterns, while a wave distortion at 138 degrees adds angular, square-wave rippling across the entire composition. The edges of the colored bands fade smoothly to transparency, creating soft boundaries against the solid deep purple background. The overall atmosphere is digital and abstract, with a cyberpunk aesthetic enhanced by the mathematical precision of the dithering combined with the organic chaos of the plasma effect.

Code

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

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