Geogrid 12

A sophisticated gradient-based shader composition featuring a warm peachy-orange to cream gradient on the left side that transitions smoothly into a neutral beige-gray center. The composition is dominated by geometric grid patterns rendered in white with varying opacity levels, creating a layered isometric or 3D perspective effect. Multiple grid layers are positioned at different angles (approximately 45-degree rotations), with the grids appearing to recede into depth. A wave distortion effect is applied throughout, creating subtle undulating distortions across the grid lines, giving them a fluid, organic quality despite their geometric nature. The overall effect combines hard geometric structure with soft, flowing distortion. The right side features more prominent grid patterns with higher opacity, while the left side shows the warm gradient more prominently. The blend modes create subtle light interactions, particularly visible in the grid areas where a hardLight blend mode produces luminous highlights. The atmosphere is minimalist and modern, with a calm, professional aesthetic. The distortion effects create a sense of movement and fluidity without being chaotic, suggesting data visualization or abstract technological imagery.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#e2e0d4" color-b="#f05255" color-space="oklch" :detail="0.7" :speed="1.5" />
    <WaveDistortion :angle="126" blend-mode="linearDodge" edges="mirror" :frequency="1.3" :speed="0.5" :strength="0.8" wave-type="triangle">
      <Grid blend-mode="hardLight" :cells="28" color="#00a2fa" :thickness="3.2" :transform="{ offsetX: 0.54, scale: 0.75 }" />
    </WaveDistortion>
    <GridDistortion :decay="1.8" edges="wrap" :grid-size="8" :intensity="5" :radius="1.75" />
  </Shader>
</template>