Geogrid 2

A dynamic gradient shader effect transitioning from warm yellow-orange on the left to deep red-brown on the right. The composition features two distinct geometric pattern layers: an upper parallelogram-shaped mesh grid with fine diagonal line work that creates a 3D perspective effect, and a lower triangular wave distortion pattern with similar line-based geometry. The mesh patterns appear to be rendered with a semi-transparent orange overlay (#ff4400) using hard light blending, creating a luminous quality. The wave distortion creates diagonal striations that flow from upper-left to lower-right at approximately 198 degrees, with a triangle wave frequency that produces sharp, angular line patterns. The overall effect combines a smooth color gradient base with intricate geometric line work that suggests motion and depth. The swirl component provides the foundational warm color transition using OKLCH color space, while the wave and grid distortions add structural complexity through their overlapping geometric patterns. The edges fade to transparency, creating a soft boundary effect. The lighting appears to come from the left side, with the brightest yellows concentrated in the lower-left quadrant and progressively darkening toward the upper-right.

<script setup lang="ts">
import {
  Shader,
  Grid,
  GridDistortion,
  Swirl,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="22" color-a="#8b1a00" color-b="#ffb800" color-space="oklch" :detail="0.6" :speed="1.5" />
    <WaveDistortion :angle="198" blend-mode="linearDodge" edges="mirror" :frequency="0.7" :strength="0.78" wave-type="triangle">
      <Grid blend-mode="hardLight" :cells="29" color="#ff4400" :thickness="3.5" :transform="{ scale: 0.75 }" />
    </WaveDistortion>
    <GridDistortion :decay="1.8" edges="wrap" :grid-size="8" :intensity="5" :radius="1.75" />
  </Shader>
</template>