Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect displaying a deep crimson red background (#a20628) with an intricate dithering pattern overlay. The dither effect uses a Bayer8 pattern with 7-pixel size, creating a grainy, stippled texture across the entire canvas. Overlaid on this base is a plasma effect that generates organic, flowing patterns with white (#ffffff) and black (#000000) elements, creating areas of varying density and contrast. The plasma has a low density (0.3) and high contrast (0.9), producing subtle, wispy cloud-like formations that drift across the surface. A wave distortion effect with square waveform (frequency 1.8, angle 224 degrees) adds a subtle undulating ripple pattern, creating a sense of movement and depth. The combination creates a textured, granular appearance with organic flowing patterns that suggest motion and energy. The overall mood is intense and dynamic, with the dithering giving it a retro or digital aesthetic while the plasma adds fluidity and the wave distortion provides subtle directional movement.

Code

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

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