Retro Bitrate 5

A pixelated shader effect displaying a dynamic gradient-based composition with a magenta and pink color palette. The image features a blocky, mosaic-like pixelation at scale 41, creating distinct square tiles across the entire canvas. The underlying gradient flows from a muted purple-gray (#685373) to a vibrant hot pink (#f66a87), with the gradient angle dynamically mapped to simplex noise for organic variation. A dithering effect with bayer4 pattern is applied in screen blend mode using magenta (#fe01ed) and light lavender (#bec1e1) colors, creating a textured, noisy appearance that adds visual complexity. The composition shows a radial mask applied from a circular element centered at approximately (0.491, 0.503), which constrains the gradient visibility to create a soft-edged vignette effect. The overall aesthetic is retro-digital with a psychedelic quality, combining smooth gradient transitions with harsh pixelation and dithering patterns. The color distribution shows stronger magenta and pink tones in the upper and right portions, transitioning to lighter lavender and white tones toward the center and left edges. The effect creates a sense of depth through the interplay of the gradient direction and the pixelated surface texture.

<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.49, y: 0.5 }" :radius="1.7" :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="#685373" color-b="#f66a87" 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="#fe01ed" color-b="#bec1e1" :pixel-size="3" />
  </Shader>
</template>