Pixel Haze 7
Pixel HazeA vibrant gradient shader effect transitioning from bright yellow-lime in the lower left to rich green in the upper right. The composition features a smooth, organic swirl pattern created by the Swirl component using colors #caf53a (yellow-green) and #52d42e (bright green) blended at 58% opacity with high detail (0.9). The swirl creates flowing, curved distortions across the canvas with a smooth, liquid-like quality. Overlaid on this base is a subtle dither pattern with white highlights on transparent areas, applied in overlay blend mode with a 5-pixel grid creating a fine textured appearance. A grid distortion effect with 75-pixel grid size and intensity of 5 adds subtle warping and displacement to the underlying gradient, creating a slightly rippled, non-uniform surface. The overall effect is enhanced by minimal film grain (0.05 strength) for subtle texture and a sharpness filter maintaining edge definition. The edges fade to transparency, and the entire composition maintains full opacity while creating a sense of depth through the layered distortion effects. The mood is energetic and organic, with a modern, digital aesthetic.
Code
<script setup lang="ts">
import {
Shader,
Dither,
FilmGrain,
GridDistortion,
Sharpness,
Swirl
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Swirl :blend="58" color-a="#caf53a" color-b="#52d42e" color-space="lch" :detail="0.9" :speed="0.6" />
<Dither blend-mode="overlay" :pixel-size="5" :threshold="0.45" />
<GridDistortion edges="mirror" :grid-size="75" :intensity="5" :radius="2" />
<Sharpness :sharpness="1" />
<FilmGrain :strength="0.05" />
</Shader>
</template>