Rounded Panels 3
Rounded PanelsA dynamic diagonal stripe pattern shader effect featuring alternating bands of coral-red (#f4412f) and bright blue (#0a11e2) colors running at a 54-degree angle across the composition. The stripes have a consistent density of 12 bands with smooth, parallel edges. The most distinctive feature is a radial gradient mask applied to the stripe pattern, creating a circular gradient effect centered at approximately 42.6% horizontally and 75.6% vertically. This circular mask has a radius of 1.45 units with soft edges (0.1 softness), causing the stripe pattern to fade and modulate in intensity as it moves away from the circle's center. The effect creates a wave-like or undulating appearance where the stripes appear more prominent and saturated near the circular focal point and gradually become more transparent and less defined toward the edges. The overall mood is energetic and modern, with high contrast between the warm red and cool blue tones creating visual tension. The composition uses linear color space for accurate color rendering, and the entire effect maintains full opacity at 1.0.
Code
<script setup lang="ts">
import {
Shader,
Circle,
Stripes
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Stripes :angle="54" :balance="{ type: 'map', source: 'idmlsathgg7fl4tmxmi', channel: 'alpha', inputMax: 1, inputMin: 0, outputMax: 0.9, outputMin: 0.1 }" color-a="#f4412f" color-b="#0a11e2" :density="12" />
<Circle id="idmlsathgg7fl4tmxmi" :center="{ x: 0.43, y: 0.76 }" :radius="1.45" :softness="0.1" :visible="false" />
</Shader>
</template>