Shaders
header.lightDarkMode D
Gallery

A gradient shader effect transitioning from a lighter mint-green at the top to a deeper turquoise-green at the bottom. The upper portion features a dithered pattern using a Bayer8 matrix with a pixelated appearance, creating a grainy texture that gradually fades into a smooth gradient. Overlaid on this is a subtle sine wave pattern rendered in white, positioned horizontally across the upper-middle section with soft edges and moderate amplitude. The wave creates a gentle undulating line effect with high softness (0.79), making it appear almost like a misty or ethereal horizontal band. The overall composition has a calm, minimalist aesthetic with smooth color transitions and a subtle animated quality from the wave component. The dithering effect adds visual interest without overwhelming the serene gradient base.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Dither,
  SineWave
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Dither color-a="#07e6b8" color-b="#abffd3" pattern="bayer8" :pixel-size="5" :threshold="0.32" :visible="true">
      <SineWave :amplitude="0.1" :frequency="0.7" :position="{ x: 0.5, y: 0 }" :softness="0.79" :thickness="0.81" />
    </Dither>
  </Shader>
</template>