Geogrid 4

A three-dimensional wireframe grid structure rendered in neon pink/red (#e6154b) against a deep purple background (#1a0a3d to #36055e gradient). The grid consists of approximately 22x22 cells with 2.8-pixel thick lines forming a rectangular mesh. The entire structure exhibits a subtle wave distortion effect applied at a 337-degree angle with triangle waveform, creating a gentle undulating deformation across the grid surface. The grid appears to be scaled to 75% and positioned in perspective view, creating a trapezoid-like appearance suggesting depth and three-dimensional space. A GridDistortion effect with high intensity (5) and moderate radius (1.75) adds additional warping and bending to the grid lines, particularly visible in the center and edges where the mesh appears to bulge and compress. The overall composition has a cyberpunk aesthetic with the neon pink grid lines creating strong contrast against the dark purple background. The blend mode is set to hardLight, giving the grid lines a luminous quality. The wave distortion creates subtle ripples across the surface while maintaining the geometric structure of the grid.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="18" color-a="#1a0a3d" color-b="#36055e" color-space="oklab" :detail="0.9" :speed="1.5" />
    <WaveDistortion :angle="337" edges="mirror" :frequency="0.9" :strength="0.15" wave-type="triangle">
      <Grid blend-mode="hardLight" :cells="22" color="#e6154b" :thickness="2.8" :transform="{ scale: 0.75 }" />
    </WaveDistortion>
    <GridDistortion :decay="1.8" edges="wrap" :grid-size="8" :intensity="5" :radius="1.75" />
  </Shader>
</template>