Shaders
header.lightDarkMode D
Gallery

A deep, dark abstract shader effect dominated by flowing concentric wave patterns that create a mesmerizing swirl motion. The primary visual element consists of fine, parallel lines that curve and undulate across the composition, creating a sense of depth and movement. The lines radiate from the upper right quadrant, flowing diagonally across the frame with organic, wave-like distortions. The overall atmosphere is cool and technological, with a subtle luminescence along the wave crests that creates a glowing effect. The color palette is extremely dark and moody, with deep navy and near-black tones forming the base, while thin blue highlights trace the wave patterns, creating a subtle contrast. The effect suggests liquid motion, electromagnetic fields, or digital data streams. A very faint film grain texture overlays the entire composition, adding subtle noise and tactile quality. The spatial composition creates a tunnel-like perspective, with the waves appearing to flow toward the viewer from the upper right, establishing a strong sense of directional movement and three-dimensional depth. The overall mood is mysterious, sophisticated, and slightly ominous, with a cyberpunk or sci-fi aesthetic.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Blob,
  FilmGrain,
  Swirl,
  Twirl,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#080f1a" color-b="#0b0b29" color-space="oklch" />
    <WaveDistortion :angle="344" blend-mode="linearDodge" edges="wrap" :frequency="2.9" :strength="0.1" :transform="{ scale: 1.3 }">
      <WaveDistortion :angle="354" edges="mirror" :frequency="80" :speed="0.3" :strength="1">
        <Blob :center="{ x: 0.2, y: 0.98 }" color-a="#020117" color-b="#0b0a2e" :deformation="0.7" highlight-color="#0051ff" :highlight-intensity="0.6" :highlight-x="0.1" :highlight-y="-0.2" :highlight-z="0.1" :size="0.8" :softness="1" />
      </WaveDistortion>
    </WaveDistortion>
    <FilmGrain :strength="0.05" />
    <Blob blend-mode="colorDodge" :center="{ x: 0.35, y: 0.63 }" color-a="#3535ff" color-b="#1e47e9" :deformation="2" :opacity="0.08" :softness="2" />
    <Twirl :center="{ x: 0.39, y: 1 }" edges="mirror" :intensity="-1.7" />
  </Shader>
</template>