Rounded Panels 11

A dynamic striped shader effect featuring parallel diagonal lines at approximately 78 degrees angle, creating a sense of motion and depth. The stripes alternate between a deep navy blue (#1a3a6e) and a lighter periwinkle blue (#6fa8e0), with 12 stripes per unit density creating a rhythmic pattern. The stripes have sharp, clean edges with no softness, producing a crisp, geometric appearance. A circular gradient mask (invisible but active) centered slightly right of center (0.55, 0.42) with a radius of 1.6 units modulates the stripe balance, creating subtle variation in stripe prominence across the composition. The effect has a speed parameter of 0.2, suggesting animation capability. The overall mood is modern, technical, and professional with a cool color palette dominated by blue tones. The linear color space ensures accurate color representation. The composition appears to be viewed in widescreen 16:9 aspect ratio, with the diagonal stripes creating a sense of forward motion or directional flow from upper left to lower right.

Code

vue

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Stripes :angle="78" :balance="{ type: 'map', source: 'idmlsathgg7fl4tmxmi', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 0.9, outputMin: 0.1 }" color-a="#1a3a6e" color-b="#6fa8e0" :density="12" />
    <Circle id="idmlsathgg7fl4tmxmi" :center="{ x: 0.55, y: 0.42 }" :radius="1.6" :softness="0.1" :visible="false" />
  </Shader>
</template>