Pixel Haze 8
Pixel HazeA vibrant gradient shader effect featuring smooth, flowing transitions between warm and cool color zones. The composition displays diagonal swirling patterns that create a sense of motion and fluidity across the canvas. The primary color transition moves from deep purple in the upper-left and center areas to bright orange-red tones in the lower-right and left corners, with magenta and pink acting as transitional hues throughout. The swirl effect creates organic, wave-like distortions that bend the color gradients into curved paths. A subtle dithering pattern with a bayer4 grid overlay adds fine texture and grain throughout, creating a slightly stippled appearance that prevents the gradients from appearing too smooth. The grid distortion component introduces subtle warping and undulation to the overall composition, with a radius of 2 and intensity of 5 creating gentle wave-like deformations. A fine film grain layer (0.05 strength) adds additional texture and visual interest. The overall effect is smooth yet textured, with a modern, digital aesthetic that suggests movement and energy. The edges maintain transparency, allowing the effect to blend seamlessly. The color space uses LCH for perceptually uniform transitions.
Code
<script setup lang="ts">
import {
Shader,
Dither,
FilmGrain,
GridDistortion,
Sharpness,
Swirl
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Swirl :blend="43" color-a="#e0390b" color-b="#6b23a1" color-space="lch" :detail="2" :speed="0.6" />
<Dither blend-mode="overlay" :pixel-size="5" :threshold="0.34" />
<GridDistortion edges="mirror" :grid-size="75" :intensity="5" :radius="2" />
<Sharpness :sharpness="1" />
<FilmGrain :strength="0.05" />
</Shader>
</template>