Dither Wave 5
Dither WaveA smooth, horizontally-oriented gradient shader effect transitioning from magenta/pink on the left through coral and salmon tones in the center to golden-orange and bright orange on the right. The gradient uses a linear interpolation across the full width of the canvas. A subtle halftone or dotted texture pattern overlays the entire surface, creating a fine pixelated appearance that adds visual depth and prevents the gradient from appearing too flat. The dot pattern is denser in some areas and creates a gentle, organic feel. The color transition is seamless and uses oklab color space for the primary gradient (red to orange) with a secondary linear gradient (magenta to gold) blending in normal mode. The overall effect is warm and energetic, with no sharp edges or hard transitions. The atmosphere is modern and vibrant, suitable for contemporary design applications. The dotted texture gives it a slightly retro or artistic quality while maintaining a polished, professional appearance.
Code
<script setup lang="ts">
import {
Shader,
Dither,
LinearGradient,
SineWave
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<LinearGradient :angle="180" color-a="#e06519" color-b="#df001a" color-space="oklab" />
<Dither id="idmgijmh7s6y9u9f0ao" :opacity="0" :pixel-size="5" :threshold="0.24" :visible="false">
<SineWave :amplitude="0.1" :angle="203" :frequency="1.4" :softness="0.79" :thickness="0.81" />
</Dither>
<LinearGradient color-a="#d0309a" color-b="#e6af18" mask-source="idmgijmh7s6y9u9f0ao" />
</Shader>
</template>