Chevron Nodes 4
Chevron NodesA digital circuit board or technical schematic visualization with a dark, deep navy background (#050c17). The composition features a layered grid system with multiple scales: a fine micro-grid in dark blue (#011c3b) at 91% opacity creating subtle texture, overlaid with a coarser macro-grid in bright blue (#485ed4) forming larger rectangular sections. The grids are distorted by a wave effect at 326 degrees with square waveform characteristics, creating organic undulation and ripple patterns across the geometric structure. A grid distortion effect with radius 2.8 and decay of 3 adds localized warping and bulging to the grid intersections. White dithering with bayer2 pattern (9px pixel size, 69% threshold) applied via screen blend mode creates a grainy, scanline-like texture throughout, simulating digital noise and CRT monitor artifacts. A strong glow effect (intensity 4.8, size 20) illuminates the bright blue grid lines and dithered white elements, creating a luminous halo and bloom effect. The overall aesthetic is cyberpunk/tech-noir with a sense of depth, movement, and digital energy. Vertical and horizontal lines show varying intensity with some appearing as dashed segments, suggesting circuit traces or data flow paths.
Code
<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="326" edges="mirror" :frequency="4.1" :speed="0.6" :strength="0.55" wave-type="square" />
<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>