Porthole 6

A sophisticated gradient shader effect featuring diagonal parallel stripes that transition smoothly from deep purple on the left to warm beige/tan on the right. The composition uses a linear gradient as the base layer, flowing horizontally from #6c3086 (dark purple) to #decfa3 (light tan). Overlaid on this gradient is a sawtooth wave distortion effect with a frequency of 7.7, creating diagonal striped bands that appear to ripple and undulate across the canvas. The wave distortion has a strength of 2 and uses an angle range mapped between 70-110 degrees, controlled by an invisible circular mask positioned at coordinates (0.253, 0.552) with a radius of 0.85. This creates a subtle radial influence on the wave angle variation. The diagonal stripes maintain consistent spacing and create a sense of depth and movement, with the distortion effect giving the flat gradient a three-dimensional, folded appearance. The overall mood is modern and elegant, with smooth color transitions and a subtle sense of motion or flow. The effect uses LCH color space for the gradient, ensuring perceptually uniform color transitions.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#6c3086" color-b="#decfa3" 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.25, y: 0.55 }" :radius="0.85" :visible="false" />
  </Shader>
</template>