Holographic Waves 6
Holographic WavesA dynamic gradient shader effect featuring diagonal parallel lines that flow from upper-left to lower-right across the entire composition. The effect creates a sense of motion and depth through directional line work. The color palette transitions smoothly from warm peachy-orange tones in the upper-left corner, through vibrant magenta and pink hues in the center, to deep dark-blue and purple tones in the upper-right and lower-right areas. The lines vary in thickness and intensity, with brighter, more saturated lines concentrated in the left-center area and darker, more subdued lines toward the right edge. A subtle wave distortion is applied perpendicular to the line direction, creating a rippling effect that adds dimensionality. The overall composition has a high-frequency detail level with sharp line definition enhanced by the sharpness filter. A very subtle film grain texture is visible throughout, adding a slight organic quality to the otherwise smooth gradients. The blob component contributes warm golden-yellow and magenta highlights in the left-center region, creating a focal point of intensity. Chromatic aberration is minimally applied, creating imperceptible color fringing at high-contrast edges. The effect conveys a sense of energy, motion, and modern digital aesthetics with a sunset-to-night color journey.
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="#e04870" color-b="#2a1f8e" color-space="oklch" :detail="4.1" />
<Blob :center="{ x: 0.28, y: 0.38 }" color-a="#f7c46e" color-b="#d44892" color-space="oklch" :deformation="1" :highlight-intensity="0.8" :highlight-z="0.8" :size="0.72" :softness="1" :visible="true" />
<WaveDistortion :angle="168" 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>