Shaders
header.lightDarkMode D
Gallery

A dark, tech-noir shader effect featuring a perspective grid pattern that recedes into the distance. The composition shows a cyan/neon-green (#00ffaa) grid with approximately 29x29 cells rendered with thin 0.2-thickness lines against a very dark navy-black background (#11131f). The grid appears to be distorted and warped, creating a subtle 3D perspective effect that suggests depth and movement. The grid distortion is applied with a decay of 6.4 and radius of 3, creating organic wave-like undulations across the mesh. A concentric spin effect with 5 rings adds subtle rotational animation at 0.3 speed with high randomness (0.91), creating a vortex-like quality at the center. Chromatic aberration with red offset of -1 and blue offset of 1 introduces slight color fringing at the edges of the grid lines, adding a glitchy, digital aesthetic. The overall effect is masked by a circular gradient (radius 3.2 with 2 softness) that creates a vignette-like fade toward the edges. The atmosphere is cyberpunk and digital, with a cool, moody tone dominated by the contrast between the bright neon grid and the deep dark background. The effect conveys motion, depth, and technological sophistication.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#11131f" :visible="true" />
    <Group mask-source="idmm5st7oo9avp1hoem">
      <SolidColor color="#11131f" :visible="true" />
      <Grid :cells="29" color="#00ffaa" :thickness="0.2" />
      <ConcentricSpin :center="{ x: 0, y: 0 }" :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.1" />
    </Group>
    <Circle id="idmm5st7oo9avp1hoem" :center="{ x: 0, y: 0 }" :radius="3.2" :softness="2" :visible="false" />
  </Shader>
</template>