Shaders
header.lightDarkMode D
Gallery

Dither Wave 10

Dither Wave

A 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

vue
<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>