Geogrid

A dynamic isometric shader effect featuring layered geometric planes with a magenta/pink grid pattern overlaid on dark backgrounds. The composition shows multiple chevron or arrow-shaped surfaces arranged in 3D perspective, creating depth through overlapping planes. The primary visual elements include: (1) A bright yellow-green gradient background on the left side transitioning to pure black, creating strong contrast; (2) Magenta/pink grid lines with triangular wave distortions creating a rippling, undulating effect across the surfaces; (3) The grid pattern uses a hardLight blend mode creating luminous intersections where lines cross; (4) Triangle wave distortions applied at 70-degree angles create diagonal striations and movement across the planes; (5) The overall effect suggests motion and fluidity despite the geometric structure, with the wave distortion giving the rigid grid an organic, breathing quality. The spatial arrangement uses isometric perspective with multiple receding planes, and the lighting creates a neon-like aesthetic typical of synthwave or cyberpunk visual styles. The magenta grid has a thickness of 3.5 units with 29 cells, creating fine detail across the surfaces.

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

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