Retro Bitrate 2

A pixelated shader effect displaying a dynamic gradient composition with a central cloud-like or organic shape. The effect features a sophisticated color mapping system where a simplex noise pattern (invisible but controlling the gradient angle) drives a linear gradient that transitions between deep magenta (#4f1863) and bright red (#e90139). The gradient angle is dynamically mapped from the noise luminance, creating angular variation across the pixelated blocks. A circular mask centered at the top (radius 1.55) constrains the gradient to an organic, roughly symmetrical shape. The pixelation scale of 41 creates large blocky squares that form the primary visual structure. Overlaid on top is a dither effect using a bayer4 pattern with blue (#2a4ea8) and green (#06c764) colors in screen blend mode, adding a grainy, halftone-like texture that creates visual complexity and breaks up the solid color blocks. The dither pattern uses a pixel size of 3 with 50% threshold, creating a scattered speckled appearance throughout. The overall composition has a deep blue background (#2a4ea8 visible in the dither), with the central pixelated gradient shape floating above it. The effect creates a sense of depth and dimensionality through the layering of gradient, pixelation, and dithering. The mood is modern, digital, and somewhat abstract with a cyberpunk aesthetic.

<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: 0 }" :radius="1.55" :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="#e90139" color-b="#4f1863" 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="#2a4ea8" color-b="#06c764" :pixel-size="3" />
  </Shader>
</template>