Rounded Panels 4

A dynamic diagonal stripe pattern shader effect featuring a smooth color gradient transition from warm orange to cool purple. The stripes are angled at approximately 131 degrees, creating parallel diagonal lines that sweep across the composition from lower-left to upper-right. The left portion of the image is dominated by vibrant orange (#f5600e) stripes with consistent spacing, while the right portion transitions into rich purple (#a259c0) stripes. The transition between colors is gradual and organic, creating a diagonal gradient boundary that runs from the upper-center area toward the lower-right. The stripe density is set to 12, producing evenly-spaced parallel lines with sharp, clean edges. The effect has a modern, minimalist aesthetic with a balanced opacity of 1.0, creating a solid, non-transparent appearance. The stripes maintain uniform width and spacing throughout, with the color shift being the primary visual variation. The overall composition suggests motion or flow along the diagonal axis, enhanced by the stripe pattern's directional nature. The color balance is modulated by an invisible circular gradient mask positioned at coordinates (0.246, 0.297) with a radius of 1.65, which subtly influences the stripe intensity across the canvas, though this modulation is subtle due to the balance range of 0.1 to 0.9.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes :angle="131" :balance="{ type: 'map', source: 'idmlsathgg7fl4tmxmi', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 0.9, outputMin: 0.1 }" color-a="#f5600e" color-b="#a259c0" :density="12" />
    <Circle id="idmlsathgg7fl4tmxmi" :center="{ x: 0.25, y: 0.3 }" :radius="1.65" :softness="0.1" :visible="false" />
  </Shader>
</template>