City Grid 7
City GridA dark, atmospheric digital effect featuring a pixelated plasma animation against a near-black background. The composition shows a gradient of purple and magenta pixels concentrated in the upper-right portion of the frame, creating a sense of movement and energy flowing diagonally from top-right toward the lower-left. The pixelation effect creates a blocky, retro-digital aesthetic with varying pixel sizes controlled by a sine wave modulation, resulting in denser clustering in bright areas and sparse distribution in dark areas. The plasma effect underneath generates organic, turbulent patterns with high contrast between the vibrant magenta (#a300b5) and pure black (#000000) colors. The overall mood is cyberpunk and technological, with a sense of dynamic energy and motion. The effect has a soft, glowing quality despite the pixelation, suggesting high intensity and contrast settings. The background solid color (#09060f) is nearly imperceptible, appearing as pure black, allowing the purple-magenta plasma pixels to stand out dramatically. The spatial distribution creates depth, with the densest pixel concentration at the top creating a sense of the effect flowing or dispersing downward.
Code
<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="#a300b5" :contrast="1.6" :density="3.3" :intensity="1.8" />
</Pixelate>
<SineWave id="idmmbhthud5inxgebqc" :amplitude="0.1" :angle="159" :frequency="1.9" :position="{ x: 0.9, y: 0.29 }" :softness="1" :thickness="1" :visible="false" />
</Shader>
</template>