Retro Bitrate 4
Retro BitrateA pixelated gradient shader effect displaying a smooth color transition from warm yellow and orange tones in the upper left to deeper orange hues in the lower right. The image features a diagonal gradient flow with a pixelated/blocky appearance created by a scale-41 pixelation filter applied over the underlying gradient. The pixelation creates distinct square blocks of varying sizes that form a mosaic-like pattern, with the blocks becoming more pronounced and visible due to the dithering effect applied with a bayer4 pattern using orange (#ff8d21) and tan (#d9c26c) colors in screen blend mode. The overall effect creates a warm, glowing appearance with a retro digital aesthetic. The gradient appears to flow from approximately the center-left toward the bottom-right, with color intensity increasing toward the right side of the composition. The dithering adds a subtle texture and noise pattern throughout, enhancing the pixelated, low-resolution digital art style. The atmosphere is warm and energetic, reminiscent of 8-bit or 16-bit era computer graphics.
Code
<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="139" :frequency="0.6" :position="{ x: 0.02, y: 0.45 }" :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="#ce1ea4" color-b="#4a2b2d" 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="#ff8d21" color-b="#d9c26c" :pixel-size="3" />
</Shader>
</template>