Geogrid 11

A geometric grid-based shader effect displaying an isometric perspective with a parallelogram shape. The composition features a dense grid of diagonal lines creating a chevron or herringbone pattern that appears to wave and undulate across the canvas. The grid lines are rendered in a light cyan-blue color (#a8d4e6) with a thickness of approximately 2.3 pixels, creating sharp linear patterns. The underlying background transitions smoothly from a muted purple-lavender on the left side to a soft blue-gray on the right, creating a subtle gradient atmosphere. The grid pattern exhibits wave distortion applied at a 350-degree angle with triangle wave characteristics, causing the parallel lines to bend and flow in a rhythmic, undulating motion. The distortion creates a sense of depth and movement, making the flat geometric pattern appear to ripple and shift. The overall effect combines a hard light blend mode that makes the grid lines stand out crisply against the gradient background. The composition maintains a 75% scale with the grid centered, and the entire effect is overlaid with a swirl component that adds subtle color variation between blue-gray (#7a9cb8) and soft purple (#b0a3c8) tones. The visual result is a modern, tech-forward aesthetic with a sense of dynamic motion frozen in time.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="28" color-a="#7a9cb8" color-b="#b0a3c8" color-space="oklch" :detail="0.6" :speed="1.5" />
    <WaveDistortion :angle="350" edges="mirror" :frequency="1.3" :strength="0.25" wave-type="triangle">
      <Grid blend-mode="hardLight" :cells="24" color="#a8d4e6" :thickness="2.3" :transform="{ scale: 0.75 }" />
    </WaveDistortion>
    <GridDistortion :decay="1.8" edges="wrap" :grid-size="8" :intensity="5" :radius="1.75" />
  </Shader>
</template>