Dither Wave 6

A smooth, gradient-based shader effect displaying a horizontal color transition from left to right. The left side features a vibrant magenta/pink (#df5fc7) that gradually transitions through purple and blue tones in the center, eventually shifting to a bright lime-green (#93e142) on the right side. The gradient uses the OKLab color space for smooth perceptual transitions. Overlaid on this base gradient is a second diagonal gradient that runs from the upper-left to lower-right, transitioning from deep blue (#1925d2) to magenta (#d65be6), creating a complex multi-directional color blend. The entire composition is rendered with a halftone dot pattern that becomes increasingly sparse and visible toward the edges, particularly noticeable in the lower-left and upper-right corners where the dots are more pronounced. This dithering effect creates a subtle texture that adds depth and visual interest to the smooth gradients. The overall mood is vibrant and modern, with a soft, diffused quality created by the blended gradients and the fine dot pattern texture.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient :angle="180" color-a="#93e142" color-b="#df5fc7" color-space="oklab" />
    <Dither id="idmgijmh7s6y9u9f0ao" :opacity="0" :pixel-size="5" :threshold="0.24" :visible="false">
      <SineWave :amplitude="0.1" :angle="146" :frequency="1.4" :softness="0.79" :thickness="0.81" />
    </Dither>
    <LinearGradient color-a="#1925d2" color-b="#d65be6" color-space="oklab" :end="{ x: 0.83, y: 0.87 }" mask-source="idmgijmh7s6y9u9f0ao" :start="{ x: 0.08, y: 0.06 }" />
  </Shader>
</template>