Holographic Waves 5
Holographic WavesA sophisticated gradient shader effect featuring diagonal parallel lines that sweep across the composition from upper left to lower right. The primary visual element is a wave distortion pattern with high-frequency triangular waves creating fine linear striations throughout the image. The color palette transitions smoothly from pink and magenta tones on the left side through cyan and light-blue in the center to deep dark-blue on the right side. A subtle blob element with soft edges is positioned in the upper-left quadrant, contributing warm purple and teal undertones with a highlight accent. The swirl component provides smooth color blending using the OKLCH color space, creating a harmonious transition between the cool blue family colors. The wave distortion at 165 degrees with 30 frequency creates the characteristic fine-line texture that dominates the visual appearance. A chromatic aberration effect with minimal strength (0.02) adds subtle color fringing, while the sharpness filter at value 2 enhances edge definition of the linear patterns. Film grain at 0.15 strength adds subtle texture and noise, preventing the gradient from appearing too smooth and artificial. The overall mood is modern, ethereal, and calming with a sense of flowing motion suggested by the diagonal line direction and wave patterns.
Code
<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="#a8c4e0" color-b="#4a6fa5" color-space="oklch" :detail="4.1" />
<Blob :center="{ x: 0.3, y: 0.35 }" color-a="#c9b8e8" color-b="#7eb5c4" color-space="oklch" :deformation="1" :highlight-intensity="0.8" :highlight-z="0.8" :size="0.72" :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>