Dither Wave 7
Dither WaveA gradient shader effect transitioning from deep blue at the top to cyan-light blue at the bottom. The primary visual element is a dithered pattern using a Bayer 8x8 matrix with a pixel size of 5, creating a characteristic halftone-like dotted texture across the entire canvas. The dither pattern uses two base colors: a vibrant royal blue (#3140f5) and a bright cyan (#2bb0f9), blended together with full opacity. Overlaid on this dithered base is a subtle sine wave effect positioned at the bottom center of the composition, rendered in white with high softness (0.79) and moderate thickness (0.81). The wave has a low amplitude (0.1) and frequency (0.7), creating a gentle undulating horizontal line that appears to ripple across the lower portion of the image. The overall effect creates a smooth, flowing transition from the dithered pattern to the wave, with the dither becoming more prominent in the upper regions and the wave providing a subtle organic movement at the base. The composition has a modern, digital aesthetic with a calm, flowing atmosphere.
Code
<script setup lang="ts">
import {
Shader,
Dither,
SineWave
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Dither color-a="#3140f5" color-b="#2bb0f9" pattern="bayer8" :pixel-size="5" :threshold="0.32" :visible="true">
<SineWave :amplitude="0.1" :frequency="0.7" :position="{ x: 0.5, y: 1 }" :softness="0.79" :thickness="0.81" />
</Dither>
</Shader>
</template>