Dither Wave 10
Dither WaveA smooth gradient transition shader effect that flows from a vibrant deep red (#f40943) on the left side to a bright golden yellow (#f6dc28) on the right side. The gradient is created using a Bayer8 dithering pattern with a pixelSize of 5, which creates a subtle dotted texture throughout the entire composition. The dithering pattern becomes progressively more visible in the transition zone, creating a halftone-like effect that softens the color shift. Overlaid on this gradient is a sine wave component positioned at the right edge (x: 1) that creates vertical undulating lines with white color, soft edges (softness: 0.79), and a frequency of 0.7, adding a subtle wave distortion to the right portion of the gradient. The overall effect has a warm, energetic atmosphere with smooth color transitions and a modern, digital aesthetic. The opacity is fully set to 1, making the effect fully visible without transparency.
Code
<script setup lang="ts">
import {
Shader,
Dither,
SineWave
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Dither color-a="#f40943" color-b="#f6dc28" pattern="bayer8" :pixel-size="5" :threshold="0.32" :visible="true">
<SineWave :amplitude="0.1" :angle="90" :frequency="0.7" :position="{ x: 1, y: 0.5 }" :softness="0.79" :thickness="2" />
</Dither>
</Shader>
</template>