Porthole

A dynamic gradient shader effect featuring diagonal parallel stripes that create a sense of depth and movement. The composition uses a linear gradient transitioning from cyan/turquoise (#68cac5) on the left side to deep purple (#6205aa) on the right side. The gradient flows horizontally across the canvas at a 0-degree angle. Overlaid on this base gradient is a sawtooth wave distortion effect with a frequency of 7.7 and strength of 2, creating sharp, angular ridge-like patterns that run diagonally across the image. The wave distortion is modulated by an invisible circular mask positioned at the top-center of the canvas (coordinates 0.5, 0 with radius 1.8), which controls the angle variation of the waves between 70 and 110 degrees. This creates a subtle directional shift in the wave patterns from left to right. The overall effect produces a three-dimensional appearance with parallel diagonal bands that appear to fold and recede into space, creating a modern, sleek aesthetic with smooth color transitions and crisp geometric distortion patterns. The lighting and shading suggest depth, with the stripes appearing to cast subtle shadows on adjacent surfaces.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#68cac5" color-b="#6205aa" color-space="oklch" />
    <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: 0 }" :radius="1.8" :visible="false" />
  </Shader>
</template>