Vertex Mesh 4

A dark, atmospheric shader effect featuring a deep navy-black background (#11131f) with a radial grid pattern emanating from the upper right area. The grid consists of fine orange (#ff6e00) lines arranged in approximately 29 cells, creating a perspective effect that appears to recede into the distance. The grid is overlaid with a ConcentricSpin distortion effect centered at coordinates (1, 0), creating 4 concentric rings with a speed of 0.3 and high intensity (60), producing a subtle warping and spinning motion. A GridDistortion effect with decay of 6.4 and radius of 3 further warps the grid pattern, creating organic undulations and bulges across the mesh. The entire composition is masked by a soft circular gradient centered at (1, 0) with a radius of 3.2 and softness of 1.2, creating a vignette-like fade at the edges. A ChromaticAberration effect with strength 0.15 adds subtle color fringing, with red offset at -1 and blue offset at +1, creating a slight 3D depth perception. The overall mood is technological, digital, and immersive, with a sense of depth and motion despite the static nature of the image.

<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="#ff6e00" :thickness="0.2" />
      <ConcentricSpin :center="{ x: 1, y: 0 }" :intensity="60" :rings="4" :smoothness="0" :speed="0.3" :speed-randomness="0.91" />
      <GridDistortion :decay="6.4" :grid-size="27" :intensity="5" :radius="3" />
      <ChromaticAberration :strength="0.15" />
    </Group>
    <Circle id="idmm5st7oo9avp1hoem" :center="{ x: 1, y: 0 }" :radius="3.2" :softness="1.2" :visible="false" />
  </Shader>
</template>