Dither Wave

A smooth, gradient-based shader effect displaying a horizontal color transition from vibrant blue on the left to bright lime green on the right, with cyan and turquoise tones dominating the center. The gradient uses the OKLab color space for smooth interpolation between #0000ff (pure blue) and #1aff00 (bright lime green). The effect features a halftone or dotted pattern overlay that becomes increasingly visible toward the edges, creating a subtle pixelated texture that enhances the digital aesthetic. The dots are denser and more pronounced at the left and right edges, fading toward the center, giving the gradient a sophisticated depth. The overall composition is perfectly horizontal with no rotation, creating a clean left-to-right color sweep. The lighting is even and uniform across the entire canvas with no shadows or highlights, maintaining a flat, modern design aesthetic. The blend mode is set to normal, preserving the pure color transitions without any multiplicative or additive effects. The atmosphere is clean, contemporary, and tech-forward, evoking themes of digital transformation, energy, and motion.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient :angle="180" :center="{ x: 0.5, y: 0.5 }" color-space="oklab" end-color="#0000ff" start-color="#1aff00" />
    <Dither id="idmgijmh7s6y9u9f0ao" :opacity="0" :pixel-size="5" :threshold="0.24" :visible="false">
      <SineWave :amplitude="0.32" :angle="309" :frequency="1.1" :softness="0.79" :thickness="0.81" />
    </Dither>
    <LinearGradient :center="{ x: 0.5, y: 0.5 }" end-color="#0000ff" mask-source="idmgijmh7s6y9u9f0ao" start-color="#1aff00" />
  </Shader>
</template>