Shaders
header.lightDarkMode D
Gallery

A dynamic gradient background transitioning from lime-yellow (#b4cd0a) on the left to bright chartreuse-green (#b8f742) on the right, creating a horizontal linear gradient. The gradient is overlaid with a sawtooth wave distortion effect that creates diagonal striped patterns running from upper-left to lower-right across the entire canvas. The wave distortion has a frequency of 7.7 with a strength of 2, producing evenly-spaced parallel diagonal bands of alternating slightly darker and lighter shades of the base gradient colors. The distortion angle varies between 70-110 degrees, controlled by an invisible circular mask positioned at the top-center of the composition. The overall effect creates a vibrant, energetic striped pattern with a subtle 3D chevron or herringbone appearance. The colors remain saturated and bright throughout, with no blur or glow effects, maintaining sharp definition of the diagonal wave patterns. The mood is modern, dynamic, and visually stimulating with a strong sense of directional movement.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#b4cd0a" color-b="#b8f742" color-space="hsl" />
    <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>