Vertex Mesh

A dark, tech-noir shader effect featuring a deep navy-black background (#11131f) overlaid with a geometric grid pattern. The primary visual element is a bright neon cyan-green grid (#00ffaa) composed of 9x9 cells with thin 0.2-unit line thickness, creating a regular rectangular tessellation across the entire canvas. Overlaying this structured grid is a ConcentricSpin distortion effect that warps and rotates the grid lines in concentric patterns emanating from the center, creating a hypnotic spiral-like appearance with 5 rings of distortion. The GridDistortion component further warps the grid with a decay of 6.4 and intensity of 5, causing the rectangular cells to bend and curve organically, particularly visible in the center where the distortion is strongest and gradually fades toward the edges. A subtle chromatic aberration effect with red offset of -1 and blue offset of +1 introduces thin color fringing along the grid lines, creating a slight 3D anaglyph effect with red and blue separation. The overall mood is cyberpunk and digital, with high contrast between the dark background and luminous neon lines. The distortion creates a sense of depth and movement, as if the grid is being pulled toward a central vortex, while maintaining visibility of the underlying geometric structure throughout.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#11131f" />
    <Grid :cells="9" color="#00ffaa" :thickness="0.2" />
    <ConcentricSpin :intensity="60" :rings="5" :seed="42" :smoothness="0" :speed="0.3" :speed-randomness="0.91" />
    <GridDistortion :decay="6.4" :grid-size="27" :intensity="5" :radius="3" />
    <ChromaticAberration :strength="0.3" />
  </Shader>
</template>