Shaders
header.lightDarkMode D
Gallery

A warm, gradient background transitioning from pale golden-yellow in the upper left to a deeper, more saturated golden-tan in the lower right. The base is a solid color (#e3b354) with a subtle dithering effect applied using a Bayer 8x8 pattern that creates a fine, grainy texture throughout. The dithering uses transparent and light yellow (#f5d47f) colors to add depth and visual interest. Overlaid on this is a subtle sine wave pattern with white color, positioned in the upper-right quadrant at approximately 72% horizontally and 11% vertically. The sine wave has low amplitude (0.15) and moves at a slow speed (0.4), creating gentle undulating lines at an angle of 204 degrees. The overall effect is a warm, textured, and slightly animated gradient with minimal visual noise, creating a sophisticated and calming aesthetic. The dithering pattern is fine enough to appear as a subtle texture rather than obvious pixelation, while the sine wave adds a delicate, organic movement to the composition.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#e3b354" />
    <Dither color-b="#f5d47f" pattern="bayer8" :threshold="0.41">
      <SineWave :angle="204" :frequency="0.5" :position="{ x: 0.72, y: 0.11 }" :softness="1" :speed="0.4" :thickness="0.8" />
    </Dither>
  </Shader>
</template>