City Grid 3

A dark, atmospheric shader effect featuring a pixelated plasma animation on a near-black background. The composition shows a gradient of purple and magenta pixels emanating from the left side of the screen, creating a diagonal dispersal pattern that fades into the dark background toward the right. The pixelation effect creates distinct square blocks of varying sizes, with larger pixels on the left transitioning to smaller, more transparent pixels as they spread rightward. The plasma layer beneath generates an organic, flowing pattern with vibrant purple (#8c00ff) and black coloration, creating a sense of energy and movement. The overall effect has a cyberpunk aesthetic with a glowing, ethereal quality. The sine wave modulation controls the pixel gap distribution, creating a smooth falloff from dense to sparse pixelation. The dark purple background (#09060f) provides deep contrast, while the animated plasma generates subtle color variations between pure magenta and black, with high contrast and intensity creating a luminous appearance despite the dark overall tone.

<script setup lang="ts">
import {
  Shader,
  Pixelate,
  Plasma,
  SineWave,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#09060f" />
    <Pixelate :gap="{ type: 'map', curve: 0.35, source: 'idmmbhthud5inxgebqc', channel: 'alphaInverted', inputMax: 1, inputMin: 0, outputMax: 1, outputMin: 0.16 }" :roundness="0.2" :scale="74">
      <Plasma :balance="57" color-a="#8c00ff" :contrast="1.6" :density="3.3" :intensity="1.8" />
    </Pixelate>
    <SineWave id="idmmbhthud5inxgebqc" :amplitude="0.1" :angle="68" :position="{ x: 0, y: 0.31 }" :softness="0.8" :thickness="0.7" :visible="false" />
  </Shader>
</template>