Shaders
header.lightDarkMode D
Gallery

A gradient shader effect transitioning from deep blue-purple on the left to bright cyan-blue on the right. The image features a dithered pattern using a Bayer 8x8 matrix with a pixel size of 5, creating a characteristic halftone-like texture throughout. The dithering uses two primary colors: a medium blue (#1e92d2) and a darker blue (#2b49a4), blended together to create the gradient effect. Overlaid on this dithered base is a subtle sine wave pattern oriented vertically (90 degrees), rendered in white with soft edges and moderate amplitude. The sine wave creates gentle undulating horizontal lines that flow across the composition with a frequency of 0.7, adding a subtle wave distortion to the otherwise smooth gradient. The overall effect is a modern, digital aesthetic with a smooth color transition from cooler purples on the left to brighter blues on the right, enhanced by the granular dithering texture and the delicate wave modulation. The opacity is fully opaque at 1.0, and the blend mode is set to normal, creating a clean, layered appearance without transparency effects.

Code

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

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