Shaders
header.lightDarkMode D
Gallery

Holographic Waves 6

Holographic Waves

A 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

vue
<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>