Holographic Waves 8

A dynamic gradient shader effect featuring diagonal parallel lines that sweep across the canvas at approximately 165 degrees, creating a sense of motion and flow. The composition uses a sophisticated color transition system that shifts from warm tones (red, orange, yellow) in the lower-left quadrant through cyan and light-blue in the center, transitioning to purple and magenta in the upper-right corner. The swirl component with blend value 59 creates a subtle rotational disturbance in the color field, while the blob element centered at coordinates (0.62, 0.32) introduces a localized cyan-to-purple gradient with a bright yellow highlight that adds dimensionality. The wave distortion effect with high frequency (30) and triangle waveform creates fine linear striations throughout, giving the impression of vibrating energy lines. A chromatic aberration effect with red offset -1 and blue offset +1 adds subtle color fringing along edges, enhancing the sense of depth and optical complexity. The sharpness filter set to 2 ensures crisp definition of the line patterns, while film grain at 0.15 strength adds subtle texture and analog warmth. The overall effect is vibrant, energetic, and suggests flowing light or energy with a modern, digital aesthetic. The color space uses oklch for perceptually uniform transitions.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="59" color-a="#ff2d6a" color-b="#ffe014" color-space="oklch" :detail="4.1" />
    <Blob :center="{ x: 0.62, y: 0.32 }" color-a="#00e5ff" color-b="#b83dff" color-space="oklch" :deformation="1" :highlight-intensity="0.8" :highlight-z="0.8" :size="0.75" :softness="1" :visible="true" />
    <WaveDistortion :angle="165" edges="mirror" :frequency="30" :speed="4.9" :strength="0.7" :visible="true" wave-type="triangle" />
    <ChromaticAberration :strength="0.02" :visible="true" />
    <Sharpness :sharpness="2" />
    <FilmGrain :strength="0.15" />
  </Shader>
</template>