Shaders
header.lightDarkMode D
Gallery

Holographic Waves 4

Holographic Waves

A dynamic gradient shader effect displaying a vibrant horizontal striped pattern with flowing diagonal lines. The composition features a warm color palette transitioning from golden yellow and orange on the left side to deep magenta and pink on the right side. The Swirl component creates the underlying warm orange-to-brown base (#e83a15 to #c45e00) with a blend value of 59, establishing the foundational warm tone. The Blob component overlays a luminous gradient sphere centered at coordinates (0.32, 0.38), transitioning from bright yellow (#ffd024) through vibrant magenta (#ff2466) with a highlight in pale yellow (#ffe11a), creating a glowing focal point with soft edges and 3D depth perception. The WaveDistortion effect at 172 degrees with high frequency (30) and triangle wave type creates the distinctive horizontal striped pattern with a strength of 0.7, producing rhythmic linear distortions across the entire canvas. The lines appear to flow diagonally from upper-left to lower-right with consistent spacing and slight wave undulation. ChromaticAberration with minimal strength (0.02) adds subtle color fringing along edges, with red offset at -1 and blue offset at +1, enhancing the dimensional quality. A Sharpness filter with value 2 enhances edge definition and line clarity, making the striped pattern crisp and defined. FilmGrain at 0.15 strength adds subtle texture and analog warmth throughout. The overall mood is energetic and dynamic, with a sunset-like quality combining warm and cool tones in harmonious contrast.

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="#e83a15" color-b="#c45e00" color-space="oklch" :detail="4.1" />
    <Blob :center="{ x: 0.32, y: 0.38 }" color-a="#ffd024" color-b="#ff2466" color-space="oklch" :deformation="1" :highlight-intensity="0.8" :highlight-z="0.8" :size="0.75" :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>