Shaders
header.lightDarkMode D
Gallery

A 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

vue
<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>