Rounded Panels 7
Rounded PanelsA dynamic striped shader effect featuring diagonal parallel lines at a -32 degree angle running across the composition. The stripes alternate between a bright golden yellow (#f7d152) and a vibrant purple (#8e66f2), creating a strong chromatic contrast. The stripe density is set to 12, producing evenly-spaced parallel bands. A circular gradient mask is applied to the stripe pattern, creating a radial falloff effect where the stripes appear most prominent in the center of the composition and gradually fade toward the edges. The circle mask has a softness value of 0.1, producing a smooth transition zone. The balance between stripe widths is dynamically controlled by the circle's alpha channel, varying from 0.1 to 0.9 intensity. The overall effect creates a sense of directional motion and depth, with the yellow stripes appearing to flow diagonally across the purple background. The color space is set to linear for accurate color blending. The composition has a modern, energetic aesthetic with smooth gradations and no harsh edges.
Code
<script setup lang="ts">
import {
Shader,
Circle,
Stripes
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Stripes :angle="-32" :balance="{ type: 'map', source: 'idmlsathgg7fl4tmxmi', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 0.9, outputMin: 0.1 }" color-a="#f7d152" color-b="#8e66f2" :density="12" />
<Circle id="idmlsathgg7fl4tmxmi" :softness="0.1" :visible="false" />
</Shader>
</template>