Shaders
header.lightDarkMode D
Gallery

Holographic Waves 3

Holographic Waves

A dynamic gradient shader effect featuring diagonal parallel lines running from upper-left to lower-right across the entire composition. The lines create a strong sense of directional motion and depth. The color palette transitions smoothly from teal and light-green on the left edges, through warm golden-orange and tan tones in the upper-left quadrant, to a bright white and pale lavender center, then back to green and cyan on the right side. The central area features a bright white highlight that creates a focal point of maximum luminosity. The diagonal lines vary in thickness and color intensity, with some appearing as thin golden-yellow stripes while others blend into the pastel background. A subtle wave distortion effect creates undulating ripples across the linear pattern, particularly noticeable in the frequency of line spacing. The overall effect is smooth and polished with a slight film grain texture overlay that adds subtle noise without disrupting the clean gradient. The chromatic aberration effect is minimal but creates a slight color separation at high-contrast edges. The composition has a modern, digital aesthetic with a soft, almost iridescent quality reminiscent of light refracting through a prism or oil on water.

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="#f2af1c" color-b="#83c697" color-space="oklch" :detail="4.1" />
    <Blob :center="{ x: 0.43, y: 0.65 }" color-a="#d5d7f8" color-b="#02af86" color-space="oklch" :deformation="1" :highlight-intensity="0.8" :highlight-z="0.8" :size="0.95" :softness="1" :visible="true" />
    <WaveDistortion :angle="208" 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>