Retro Bitrate 9
Retro BitrateA pixelated shader effect displaying a dynamic gradient-based noise pattern. The left two-thirds of the image features a chaotic mosaic of small square pixels in magenta, cyan, light-blue, light-green, and green colors, creating an organic, turbulent appearance. The pixelation scale is set to 41 pixels, producing distinct blocky artifacts. The right third transitions smoothly into a solid bright green area with fine dotted texture. The color distribution appears to be controlled by a simplex noise generator with a scale of 4.3, creating natural-looking organic variation. A linear gradient with dynamic angle mapping (controlled by noise luminance) blends magenta (#f131f6) and dark-green (#517c06) colors across the composition. A dither effect with bayer4 pattern and screen blend mode adds subtle texture and visual noise throughout, using bright green (#19d36b) and dark purple (#070226) in a 3-pixel pattern. The overall effect creates a sense of digital turbulence transitioning to calm, with a vibrant, neon-like quality enhanced by the screen blend mode creating a glowing appearance where colors overlap.
Code
<script setup lang="ts">
import {
Shader,
Circle,
Dither,
LinearGradient,
Pixelate,
SimplexNoise
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Circle id="idmm4025i3rr2toqt6j" :center="{ x: 0, y: 0 }" :radius="2.5" :visible="false" />
<SimplexNoise id="idmm5kajmj4uwhjdgmm" :scale="4.3" :speed="0.1" :visible="false" />
<Pixelate :scale="41">
<LinearGradient :angle="{ type: 'map', curve: 0, source: 'idmm5kajmj4uwhjdgmm', channel: 'luminance', inputMax: 1, inputMin: 0, outputMax: 360, outputMin: 0 }" color-a="#f131f6" color-b="#517c06" color-space="hsl" edges="mirror" :end="{ x: 0.89, y: 0.39 }" mask-source="idmm4025i3rr2toqt6j" :start="{ x: 0.67, y: 0.48 }" :visible="true" />
</Pixelate>
<Dither blend-mode="screen" color-a="#19d36b" color-b="#070226" :pixel-size="3" />
</Shader>
</template>