City Grid

A dark, atmospheric digital effect featuring a pixelated gradient that transitions from deep black on the left side to vibrant purple and magenta tones on the right side. The pixelation creates a mosaic-like appearance with square blocks of varying sizes, becoming denser and more prominent toward the right edge. The underlying effect is a plasma animation with organic, flowing patterns in purple (#8c00ff) and black, creating a sense of movement and energy. The pixelation scale of 74 with a gap mapping creates a wave-like distortion pattern that makes the pixels appear to undulate across the composition. The overall mood is technological and ethereal, with high contrast between the dark background and the luminous purple plasma effect. The sine wave mapping influences the pixel gap distribution, creating a gradient of pixelation intensity from left to right. The effect has a smooth, rounded pixel appearance due to the 0.2 roundness setting, giving it a slightly softer, less harsh digital aesthetic.

<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="102" :position="{ x: 0.8, y: 0.58 }" :softness="0.8" :thickness="0.7" :visible="false" />
  </Shader>
</template>