Geogrid 8

A vibrant gradient background transitioning from coral-orange in the upper left to deep magenta-purple in the lower right, creating a warm-to-cool color flow. The composition features multiple overlapping parallelogram shapes with diagonal crosshatch grid patterns rendered in white lines. These geometric forms appear to be layered at different depths, creating a 3D isometric perspective effect. The wave distortion effect creates subtle undulating curves across the grid patterns, giving them an organic, flowing quality despite their geometric nature. The grid lines maintain consistent thickness and spacing, creating a technical, architectural aesthetic. The hardLight blend mode of the grid causes the white lines to interact luminously with the underlying gradient, producing bright highlights where they overlap the warmer tones. The overall effect suggests a modern, digital design with elements of motion and depth, reminiscent of contemporary tech or design aesthetics. The distortion parameters create subtle warping that prevents the composition from feeling static, while the swirl and decay effects add complexity to the spatial relationships between elements.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :coarse-x="26" :coarse-y="24" color-a="#b106ba" color-b="#eb491c" color-space="oklch" :detail="0.7" :fine-x="50" :fine-y="50" :medium-x="50" :medium-y="50" :speed="1.5" />
    <WaveDistortion :angle="223" edges="mirror" :frequency="1.7" :speed="0.5" :strength="0.54" wave-type="triangle">
      <Grid blend-mode="hardLight" :cells="29" :thickness="3.5" :transform="{ scale: 0.75 }" />
    </WaveDistortion>
    <GridDistortion :decay="1.8" edges="wrap" :grid-size="8" :intensity="5" :radius="1.75" :swirl="0.1" />
  </Shader>
</template>