Chevron Nodes 3

A dark, tech-forward shader effect featuring a deep navy-to-black gradient background (#050c17) overlaid with multiple geometric grid patterns. The primary visual structure consists of a coarse 4-cell grid rendered in bright periwinkle blue (#485ed4) with thin line weights, creating large diamond-shaped quadrants across the canvas. Beneath this sits a finer 20-cell grid in dark blue (#011c3b) at 91% opacity, providing subtle texture and depth. The entire composition is distorted by two dynamic effects: a GridDistortion with a radius of 2.8 and decay of 3 creates organic wave-like undulations across the grid cells, causing the straight lines to bend into smooth, flowing curves. A WaveDistortion effect with a bounce waveType, 238-degree angle, and 0.55 strength adds additional rippling motion, making the grid appear to flow like liquid fabric. A Dither effect using a bayer2 pattern with white color and screen blending mode adds fine-grain noise texture at 9-pixel size, creating a subtle digital grain aesthetic. Finally, a Glow effect with 20-pixel size and 4.8 intensity creates a luminous halo around the bright blue grid lines, making them appear to emit light against the dark background. The overall mood is cyberpunk and futuristic, with a sense of flowing, organic motion within a rigid geometric framework. The vertical scan-line texture visible throughout adds to the digital, CRT-monitor aesthetic.

<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="#011c3b" :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="238" edges="mirror" :frequency="0.9" :speed="0.6" :strength="0.55" wave-type="bounce" />
    <Dither blend-mode="screen" color-mode="source" pattern="bayer2" :pixel-size="9" :spread="0.96" :threshold="0.69" />
    <Glow :intensity="4.8" :size="20" :threshold="0.1" />
  </Shader>
</template>