Shaders
header.lightDarkMode D
Gallery

A dynamic shader effect featuring diagonal wave-like stripes that flow across the composition at a -76 degree angle. The stripes alternate between deep magenta/crimson tones (#8b0a4e) and dark purple/navy backgrounds (#1a0a3d), creating a rhythmic pattern with soft, blurred edges. The Stretch component warps the striped pattern radially from a center point slightly right of center (0.56, 0.44), creating a subtle bulging or lens distortion effect that makes the stripes appear to curve and flow organically. The Dither component adds a grainy, pixelated texture overlay (4-pixel size) with a threshold of 0.66, which breaks up the smooth gradients and creates a subtle noise pattern throughout. The overall effect has a soft, atmospheric quality with a balance of 0.77 favoring the darker tones, giving it a moody, cinematic appearance. The stripes maintain consistent width and spacing with a density of 4, while the softness value of 0.57 creates smooth transitions between the color bands rather than hard edges. The composition suggests movement and depth through the wave-like distortion, creating a sense of flowing energy across the dark, rich color palette.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes :angle="-76" :balance="0.77" :density="4" :softness="0.57" />
    <Stretch :angle="360" :center="{ x: 0.56, y: 0.44 }" :falloff="0.49" />
    <Dither color-a="#1a0a3d" color-b="#8b0a4e" :threshold="0.66" />
  </Shader>
</template>