Retro Bitrate 3

A pixelated shader effect displaying a soft, rounded rectangular shape with a gradient that transitions from teal/cyan on the left side to pink/magenta on the right side. The gradient angle is dynamically controlled by simplex noise, creating subtle color variations throughout. The entire composition is heavily pixelated with a scale of 41 pixels, giving it a blocky, mosaic-like appearance. A dither pattern with bayer4 algorithm is applied in screen blend mode, adding a subtle textured noise using colors #95c6c2 (light cyan-green) and #475c80 (dark blue-gray), creating a grainy, halftone-like quality. The background is a light cyan dotted pattern. The overall effect creates a soft, pastel aesthetic with a retro digital or low-resolution video game appearance. A circular mask with softness is applied but set to invisible, subtly constraining the gradient's influence. The color space uses HSL interpolation, allowing smooth transitions between the teal (#21ac8e) and pink (#df0052) endpoints.

<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.5, y: 1 }" :radius="1.65" :softness="0.25" :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="#21ac8e" color-b="#df0052" 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="#95c6c2" color-b="#475c80" :pixel-size="3" />
  </Shader>
</template>