Shaders
header.lightDarkMode D
Gallery

A deep, dark abstract shader effect dominated by flowing wave patterns and swirling distortions. The composition features layered undulating lines that create a sense of depth and movement across the entire canvas. The primary visual elements consist of fine, parallel curved lines that ripple and flow in organic wave patterns, creating a mesmerizing striped texture. The left side shows more pronounced vertical wave formations with brighter blue luminescence, while the right side features tighter, more compressed wave patterns that fade into deeper darkness. The overall effect suggests fluid dynamics or electromagnetic field visualization. A subtle blob-like glow appears in the lower-left quadrant with hints of blue coloration, adding dimensional depth. The wave distortions are applied at multiple frequencies - high-frequency fine lines create detailed texture throughout, while lower-frequency undulations provide larger-scale movement. The color palette transitions from deep navy and near-black tones to electric blue highlights along the wave crests. A barely perceptible film grain overlay adds subtle noise texture. The twirl effect creates a gentle rotational distortion that subtly warps the wave patterns. The overall mood is technological, mysterious, and deeply atmospheric with a sense of continuous motion and energy flow.

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="185" edges="mirror" :frequency="80" :speed="0.3" :strength="1">
        <Blob :center="{ x: 0.55, y: 0.81 }" 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, y: 0 }" edges="mirror" :intensity="-1.7" />
  </Shader>
</template>