Dither Wave 3
Dither WaveA smooth, radial gradient shader effect transitioning from bright yellow-lime at the top-left corner to vibrant green at the bottom-right. The gradient uses a diagonal flow with the primary axis running from upper-left to lower-right, creating a sense of depth and movement. The color transition is extremely smooth and continuous, with no visible banding or harsh edges. The effect employs a halftone dot pattern overlay that becomes progressively denser toward the center, creating a subtle texture that adds visual interest without overwhelming the gradient. The dots are microscopic and create a soft, organic quality to the otherwise smooth gradient. The overall atmosphere is bright, energetic, and modern, with a fresh, natural feel reminiscent of spring growth or digital vitality. The blend mode appears to be normal with full opacity, allowing the gradient to display at maximum saturation. The color space used is oklab/oklch, which provides perceptually uniform color transitions that feel natural to the human eye.
Code
<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="#14d91e" color-b="#fbff00" color-space="oklab" edges="mirror" :end="{ x: 0.9, y: 0.82 }" end-color="#0000ff" :start="{ x: 0.24, y: 0.03 }" start-color="#1aff00" />
<Dither id="idmgijmh7s6y9u9f0ao" :opacity="0" :pixel-size="5" :threshold="0.24" :visible="false">
<SineWave :amplitude="0.21" :angle="95" :frequency="0.6" :softness="1" :thickness="0.81" />
</Dither>
<LinearGradient :center="{ x: 0.5, y: 0.5 }" color-a="#42cf59" color-b="#13eb4d" color-space="oklch" end-color="#0000ff" mask-source="idmgijmh7s6y9u9f0ao" start-color="#1aff00" />
</Shader>
</template>