Chevron Nodes

A sophisticated isometric grid-based shader effect featuring a dark, tech-forward aesthetic. The composition consists of multiple layered grid systems creating a 3D chevron or arrow-pointing pattern that recedes into depth. The base is a very dark navy-black background (#050c17) with a subtle fine grid overlay in dark teal (#012c3b) at 91% opacity providing texture. Overlaid on this is a coarser grid with 4 cells rendered in a vibrant periwinkle-blue (#485ed4) that forms the primary geometric structure with bright, glowing edges. The grid lines appear to have a wave distortion applied at 90 degrees with triangle wave characteristics, creating subtle undulating movement along the vertical axis. A grid distortion effect with a radius of 2.8 and decay of 3 adds organic warping to the geometric structure, creating depth variation. The bright blue grid lines are enhanced with a strong glow effect (intensity 4.3, size 3.6) that creates luminous halos around the edges, giving them a neon-like quality. A dither pattern with bayer2 at 79% threshold and 9-pixel size adds fine noise texture with white highlights scattered across the surface, creating a grainy, digital aesthetic. The overall mood is cyberpunk and futuristic, with a sense of depth and movement despite the static nature of the geometry. The lighting suggests the grid is self-illuminating with the blue lines acting as light sources against the dark background.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#050c17" />
    <Grid :cells="20" color="#012c3b" :opacity="0.91" :thickness="0.25" :visible="true" />
    <Grid :cells="4" color="#485ed4" :thickness="0.2" :visible="true" />
    <GridDistortion edges="mirror" :grid-size="77" :radius="2.8" />
    <WaveDistortion :angle="90" edges="mirror" :frequency="1.3" :speed="0.6" :strength="0.25" wave-type="triangle" />
    <Dither blend-mode="screen" color-mode="source" pattern="bayer2" :pixel-size="9" :spread="0.96" :threshold="0.79" />
    <Glow :intensity="4.3" :size="3.6" :threshold="0.1" />
  </Shader>
</template>