Vertex Mesh 5

A dark, tech-forward shader effect featuring a deep navy-black background (#11131f) with a prominent grid-based distortion pattern. The composition shows a 3D perspective grid rendered in cyan (#42b7ff) with approximately 29 cells, creating a receding tunnel or wireframe landscape effect. The grid lines are thin (0.2 thickness) and appear to converge toward the right side of the frame, suggesting depth and dimensional space. A concentric spin distortion effect with 2 rings is applied, centered at coordinates (1, 1), creating a subtle vortex or warping sensation that pulls the grid inward. The GridDistortion component with a decay of 6.4 and radius of 3 adds organic wave-like undulations to the grid structure, making it appear as if the surface is rippling or breathing. A ChromaticAberration effect with red offset of -1 and blue offset of +1 introduces subtle color fringing along edges, creating a slight RGB separation that enhances the digital aesthetic. The overall mood is cyberpunk and futuristic, with a sense of motion and energy despite the static nature of the image. A circular mask centered at (1, 0) with radius 3.2 and softness of 1.2 constrains the effect to a specific region, creating a focal point on the right side of the composition. The atmosphere is cool, technical, and immersive, evoking digital space or virtual environments.

<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="#42b7ff" :thickness="0.2" />
      <ConcentricSpin :center="{ x: 1, y: 1 }" :intensity="60" :rings="2" :smoothness="0" :speed="-0.1" :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>