Porthole 5

A sophisticated abstract shader effect featuring diagonal parallel stripes that transition smoothly from deep blue on the left to near-white on the right. The stripes are created by a linear gradient flowing horizontally from #097ec0 (deep blue) to #fafdfe (off-white). Overlaid on this gradient is a sawtooth wave distortion effect that creates angular, chevron-like patterns with varying frequencies (7.7 Hz), giving the stripes a dynamic, folded appearance. The wave distortion has a strength of 2 pixels and uses a circular mask centered at approximately 74.8% horizontally and 45.5% vertically to modulate the angle of the waves between 70-110 degrees. The overall effect creates a sense of depth and movement, with the stripes appearing to bend and fold in three-dimensional space. The color space uses LCH for smooth perceptual transitions. The composition has a clean, modern aesthetic with subtle shadows and highlights that enhance the dimensional quality of the geometric pattern.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#097ec0" color-b="#fafdfe" 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.75, y: 0.45 }" :radius="0.85" :visible="false" />
  </Shader>
</template>