Chevron Nodes 2

A dark, tech-forward shader effect featuring a deep navy-black background (#050c17) with a layered grid system creating a sense of depth and dimension. The primary visual structure consists of two overlapping grid patterns: a fine, dense grid with 20 cells rendered in dark blue (#011c3b) at 91% opacity providing subtle texture, and a coarser 4-cell grid in bright blue (#485ed4) creating bold structural lines. The grids are distorted by a GridDistortion effect with a radius of 2.8 and decay of 3, causing the lines to curve and warp in a wave-like pattern that creates a sense of perspective and three-dimensionality, as if viewing a curved or warped surface. A WaveDistortion effect at 135 degrees with sine wave type and 0.15 strength adds additional subtle undulation to the grid lines, making them appear to ripple gently. The bright blue grid lines are enhanced with a Glow effect (intensity 4.8, size 20) that creates a luminous halo around the lines, making them appear to emit light. A Dither effect with bayer2 pattern, white color, and screen blend mode adds a subtle grainy texture and sparkle across the surface, creating a digital, pixelated quality. The overall composition suggests a futuristic, digital landscape with a strong sense of depth, movement, and technological sophistication. The color palette is dominated by cool tones with high contrast between the dark background and bright blue accents.

<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="135" edges="mirror" :frequency="0.9" :speed="0.6" :strength="0.15" />
    <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>