Dither Wave 2

A vibrant gradient shader effect displaying a smooth color transition across the canvas. The composition features a diagonal gradient flowing from the upper-left to lower-right, transitioning through multiple color zones. The upper-left corner begins with bright orange-yellow tones that gradually shift through coral and salmon pink hues in the upper-center area. The right side and center display rich magenta and hot pink colors that deepen into purple tones. The lower-left corner features a concentrated area of deep blue and dark-blue, creating a sharp color boundary. The entire effect is rendered with a halftone dot pattern overlay that becomes increasingly sparse and subtle from left to right, creating a pixelated texture that gradually dissolves into smooth gradients. The dots are most visible in the blue corner region and fade progressively toward the magenta and purple areas. The overall mood is energetic and modern, with a digital aesthetic enhanced by the dotted texture pattern. The gradient uses mirror edge behavior on the primary layer, creating smooth color transitions without harsh cutoffs.

<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-a="#ff00f6" color-space="oklab" edges="mirror" :end="{ x: 0.76, y: 0.27 }" end-color="#0000ff" :start="{ x: 0.27, y: 0.64 }" start-color="#1aff00" />
    <Dither id="idmgijmh7s6y9u9f0ao" :opacity="0" :pixel-size="5" :threshold="0.24" :visible="false">
      <SineWave :amplitude="0.32" :angle="138" :frequency="0.6" :softness="0.79" :thickness="1.51" />
    </Dither>
    <LinearGradient :center="{ x: 0.5, y: 0.5 }" color-a="#ffb300" color-b="#3700ff" color-space="oklch" end-color="#0000ff" mask-source="idmgijmh7s6y9u9f0ao" start-color="#1aff00" />
  </Shader>
</template>