Holographic Waves 9

A vibrant gradient shader effect displaying a dynamic blend of warm colors transitioning diagonally from lower-left to upper-right. The composition features horizontal line patterns that create a sense of motion and flow across the entire canvas. The primary color palette consists of deep orange (#e84a1c) in the lower-left corner transitioning through golden-amber tones (#f59e2b) toward magenta and pink hues (#d4156e, #e8456a) in the upper-right region. The Swirl component creates organic, flowing distortions with a blend value of 59, while the Blob element adds a soft, luminous highlight with a yellowish tone (#ffe11a) positioned at approximately 28% horizontally and 35% vertically. The WaveDistortion effect at 168 degrees with triangle wave type and high frequency (30) generates the prominent horizontal striations visible throughout, creating a sense of rhythmic movement. The ChromaticAberration with minimal strength (0.02) adds subtle color fringing at the edges. A Sharpness filter with value 2 enhances edge definition, making the line patterns crisp and defined. FilmGrain at 0.15 strength adds subtle texture and analog warmth. The overall atmosphere is energetic and modern, with smooth color transitions and a sense of flowing, liquid motion. The effect appears three-dimensional with depth created by the layered color transitions and the interplay of highlights and shadows.

<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="#e84a1c" color-b="#d4156e" color-space="oklch" :detail="4.1" />
    <Blob :center="{ x: 0.28, y: 0.35 }" color-a="#f59e2b" color-b="#e8456a" 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>