Retro Bitrate 6

A pixelated shader effect displaying a diagonal gradient transition from deep blue in the upper left to bright lime green in the lower right. The image consists of square pixel blocks of varying sizes, creating a mosaic-like appearance with a scale of 41 pixels. The gradient uses a smooth color interpolation through the HSL color space, transitioning from dark forest green (#0f4d12) through cyan and light blue tones to bright yellow-green (#6fe81c). A dithering effect with a Bayer4 pattern is applied using colors #419bd5 (light blue) and #7fdb95 (light green) in screen blend mode, adding subtle texture and color variation across the pixelated surface. The overall effect creates a retro digital aesthetic with a soft, diffused quality despite the hard pixel edges. The spatial composition shows a clear diagonal flow from top-left to bottom-right, with the pixelation creating a blocky, low-resolution appearance reminiscent of early computer graphics or digital art.

<script setup lang="ts">
import {
  Shader,
  Dither,
  LinearGradient,
  Pixelate,
  SimplexNoise,
  SineWave
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SineWave id="idmm6l5eunmmrd5th1v" :amplitude="0.1" :angle="221" :frequency="0.6" :position="{ x: 0.66, y: 0.58 }" :softness="0" :speed="0.2" :thickness="1.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="#0f4d12" color-b="#6fe81c" color-space="hsl" edges="mirror" :end="{ x: 0.89, y: 0.39 }" mask-source="idmm6l5eunmmrd5th1v" :start="{ x: 0.67, y: 0.48 }" :visible="true" />
    </Pixelate>
    <Dither blend-mode="screen" color-a="#419bd5" color-b="#7fdb95" :pixel-size="3" />
  </Shader>
</template>