Pixel Beams 9
Pixel BeamsA dark, atmospheric shader effect dominated by a subtle dithering pattern overlaid on animated plasma noise. The image displays a predominantly black background (#121214) with sparse lighter gray pixels (#202124) creating a fine granular texture across the entire canvas. The dither pattern uses an 8x8 Bayer matrix at 7-pixel size, producing a characteristic checkerboard-like stippling effect with low opacity spread. Beneath this dithering layer, a plasma effect generates organic, flowing patterns with white (#ffffff) and black (#000000) color transitions, creating subtle luminous regions that appear to undulate and shift. The plasma has moderate density (0.3) and high contrast (0.9), producing soft, cloud-like formations that are barely visible through the dither overlay. A square wave distortion effect further warps the composition with a frequency of 1.8 and 256-degree angle, creating subtle vertical and horizontal rippling that adds dimensional complexity. The overall mood is dark, technological, and slightly chaotic, with a noisy, grainy aesthetic reminiscent of analog television static or digital noise. The effect maintains full opacity while using alpha masking, creating a seamless blend of all three shader components into a cohesive, moody visual texture.
Code
<script setup lang="ts">
import {
Shader,
Dither,
Plasma,
WaveDistortion
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Dither color-a="#121214" color-b="#202124" pattern="bayer8" :pixel-size="7" :threshold="0.41">
<Plasma color-a="#ffffff" :contrast="0.9" :density="0.3" :intensity="1.3" :speed="1" />
<WaveDistortion :angle="256" edges="mirror" :frequency="1.8" :strength="1" :visible="true" wave-type="square" />
</Dither>
</Shader>
</template>