Shaders
header.lightDarkMode D
Gallery

Holographic Waves 7

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 energy through a carefully orchestrated color transition. The left side transitions from light pink and lavender tones through warm yellows and oranges, while the right side features deep blues and magentas. The diagonal lines are sharp and well-defined, with a consistent thickness that creates a striped pattern. The WaveDistortion component at 172 degrees with triangle waveform and high frequency (30) creates subtle undulations along the line paths, giving them a slightly rippled appearance rather than perfectly straight geometry. The ChromaticAberration effect with red offset of -1 and blue offset of +1 creates a subtle color separation along the edges of the lines, enhancing the sense of depth and visual complexity. The Blob component positioned at coordinates (0.18, 0.35) with cyan-to-orange gradient adds a soft, organic luminous element in the upper-left quadrant, creating a focal point with highlight intensity at 0.8. The Swirl component with blend value of 59 and detail of 4.1 provides underlying color mixing between the orange (#e85d24) and blue (#1a6be8) base colors. Film grain at 0.15 strength adds subtle texture throughout, while sharpness at value 2 ensures crisp definition of the line structures. The overall mood is energetic, modern, and visually striking with a strong sense of directional flow.

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="#e85d24" color-b="#1a6be8" color-space="oklch" :detail="4.1" />
    <Blob :center="{ x: 0.18, y: 0.35 }" color-a="#2dd4f0" color-b="#f5a623" color-space="oklch" :deformation="1" :highlight-intensity="0.8" :highlight-z="0.8" :size="0.72" :softness="1" :visible="true" />
    <WaveDistortion :angle="172" 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>