Faded Dither 2

A gradient shader effect transitioning from a vibrant purple base (#652aa3) on the left side to a deeper, more saturated purple (#9241cc) on the right side. The composition features a dithering pattern overlay using a Bayer 8x8 matrix that creates a subtle grainy, stippled texture across the entire surface. This dithering effect is applied with a threshold of 0.41, producing a fine dotted pattern that adds visual complexity and depth. Overlaid on this textured base is a sine wave element positioned in the upper-left quadrant (at coordinates 0.22, 0.83 normalized), rendered in white (#ffffff) with soft edges and moderate thickness (0.8). The sine wave oscillates at a frequency of 0.5 with an amplitude of 0.15, creating subtle undulating patterns that move at a speed of 0.4. The overall effect produces a smooth, atmospheric background with layered visual interest - the solid purple foundation provides warmth and depth, the dithering adds a retro-digital texture, and the animated sine wave introduces organic, flowing movement. The edges fade to transparency, creating a seamless blend. The mood is modern, slightly ethereal, and evokes a sense of digital abstraction with organic motion.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#652aa3" />
    <Dither color-b="#9241cc" pattern="bayer8" :threshold="0.41">
      <SineWave :angle="117" :frequency="0.5" :position="{ x: 0.22, y: 0.83 }" :softness="1" :speed="0.4" :thickness="0.8" />
    </Dither>
  </Shader>
</template>