Retro Bitrate 7

A pixelated shader effect displaying a diagonal gradient transition from purple-blue tones in the lower-left to cyan-green tones in the upper-right. The image features a blocky, mosaic-like appearance with pixel blocks of varying sizes creating a retro digital aesthetic. The gradient is dynamically mapped through simplex noise, creating organic color variation within the pixelated structure. A dither pattern with screen blend mode adds subtle texture and noise throughout, creating a grainy, analog quality that contrasts with the digital pixelation. The background is a solid bright blue, while the foreground elements use a bayer4 dither pattern at 3-pixel size with approximately 50% threshold. The overall effect suggests a low-resolution digital landscape or abstract computational visualization, with the pixelation scale of 41 creating distinct blocky regions that emphasize the retro computer graphics aesthetic. The color space uses HSL interpolation for smooth hue transitions across the gradient.

<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: 1 }" :radius="2" :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="#4c1f7b" color-b="#72ce46" 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="#167bef" color-b="#b12519" :pixel-size="3" />
  </Shader>
</template>