Porthole 2

A sophisticated abstract shader effect featuring diagonal parallel lines that create a sense of depth and movement. The composition uses a linear gradient transitioning from a muted teal-gray (#628a87) on the left side to a deep navy blue (#001a42) on the right side. The gradient flows horizontally across the canvas. Overlaid on this gradient is a sawtooth wave distortion effect that creates sharp, angular striations running diagonally from upper-left to lower-right at approximately 70-110 degree angles. The wave distortion has a frequency of 7.7, producing multiple parallel ridges that create a ribbed, corrugated appearance. The distortion strength of 2 units creates pronounced depth variation between the ridges. The overall effect resembles folded fabric, venetian blinds, or architectural louvers with subtle shadowing that enhances the three-dimensional illusion. The color palette gradually darkens from left to right, with the lighter teal tones on the left providing contrast against the increasingly darker blue tones toward the right edge. The effect maintains full opacity throughout with a normal blend mode, creating a clean, professional appearance suitable for modern design applications.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#628a87" color-b="#001a42" 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>