Porthole 7

A dynamic gradient shader effect displaying diagonal parallel stripes that transition smoothly across the canvas. The composition features a linear gradient flowing horizontally from left to right, starting with deep blue (#064caa) on the left side and transitioning through magenta and pink tones in the center, culminating in pale cream and white (#d4e9e3) on the right side. The gradient operates in LCH color space for perceptually smooth transitions. Overlaid on this base gradient is a sawtooth wave distortion effect with a frequency of 7.7, creating diagonal striped bands that angle across the image. The wave distortion has a strength of 2 pixels and uses an angle mapped from a circular mask positioned at the bottom center (0.5, 1.0) with a radius of 1.8, creating varying wave angles between 70-110 degrees based on the circular mask's alpha channel. This produces a three-dimensional ribbon or venetian blind effect where the stripes appear to fold and angle progressively across the canvas. The overall mood is modern and abstract, with smooth color gradations and geometric precision. The effect creates depth through the interplay of the horizontal gradient and the diagonal wave distortion, resulting in a sophisticated, contemporary visual aesthetic.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#064caa" color-b="#d4e9e3" 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.5, y: 1 }" :radius="1.8" :visible="false" />
  </Shader>
</template>