Shaders
header.lightDarkMode D
Gallery

A 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

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