Porthole 4

A dynamic gradient shader effect displaying a smooth color transition from pink (#d95b7b) on the left side to deep blue (#2f53d2) on the right side. The gradient flows horizontally across the entire canvas with a linear interpolation in LCH color space, creating a perceptually smooth transition through purple and magenta tones in the middle. Overlaid on this base gradient is a sawtooth wave distortion effect with a frequency of 7.7 and strength of 2, creating diagonal striped patterns that angle from approximately 70 to 110 degrees. The wave distortion is modulated by an invisible circular mask centered near the middle of the canvas (0.484, 0.548) with a radius of 1.25, causing the wave angle to vary across the composition. The distortion creates sharp, angular V-shaped chevron patterns that point downward and rightward, giving the effect a sense of directional movement and depth. The overall mood is modern and energetic, with the combination of the warm-to-cool gradient and the geometric wave pattern creating visual interest and a sense of motion. The edges are set to stretch, ensuring the effect fills the entire frame seamlessly.

<script setup lang="ts">
import {
  Shader,
  Circle,
  LinearGradient,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#d95b7b" color-b="#2f53d2" color-space="lch" />
    <WaveDistortion :angle="{ type: 'map', source: 'idmma4jsk2t7um16f4s', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 110, outputMin: 70 }" :frequency="7.7" :strength="2" wave-type="sawtooth" />
    <Circle id="idmma4jsk2t7um16f4s" :center="{ x: 0.48, y: 0.55 }" :radius="1.25" :visible="false" />
  </Shader>
</template>