Shaders
header.lightDarkMode D
Gallery

A fluid, organic shader effect featuring smooth, undulating wave-like bands that flow diagonally across the composition. The primary visual structure consists of alternating curved stripes in cyan and light-green tones that create a sense of motion and depth. The waves appear to stretch and distort from a center point located in the lower-left quadrant, creating a radial pull effect. The underlying texture is composed of fine dithering patterns that blend the cyan (#1a8fd4) and light-green (#5fd49c) colors together, creating a subtle grainy quality that adds visual complexity. The overall effect has a smooth, liquid appearance with soft transitions between color zones. The angle of the distortion is approximately 246 degrees, pulling the stripes into elongated, curved forms. The composition maintains a balanced, calming aesthetic with the cool cyan tones dominating the upper and central areas while warmer light-green tones appear in the lower sections. The dithering effect at 4-pixel size creates a slightly pixelated texture that contrasts with the smooth wave distortions, producing a layered visual depth. The entire effect suggests flowing water, wind patterns, or abstract liquid dynamics.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes :angle="-102" :balance="0.77" :density="4" :softness="0.57" />
    <Stretch :angle="246" :center="{ x: 0.4, y: 0.62 }" :falloff="0.49" />
    <Dither color-a="#1a8fd4" color-b="#5fd49c" :threshold="0.66" />
  </Shader>
</template>