Pixel Haze

A smooth, flowing gradient shader effect transitioning from bright electric blue in the upper left to deep dark purple in the lower right. The swirl component creates organic, wave-like distortions that flow diagonally across the canvas, generating a sense of fluid motion. The color palette shifts through vibrant blue (#2b4cf0) to nearly black purple (#1c034f), creating depth and dimensionality. A subtle dither pattern with white overlay adds fine-grained texture throughout, visible as a slight speckled quality that breaks up the smoothness. The grid distortion effect introduces gentle warping and undulation to the gradient, creating subtle ripples and wave patterns that prevent the image from appearing flat. A very fine film grain overlay adds minimal noise for cinematic quality. The overall effect is atmospheric and ethereal, with a cool, modern aesthetic. The edges fade to transparency, and the lighting appears to emanate from the upper left, creating a sense of volumetric depth. The blend modes work together to create a cohesive, polished look without harsh transitions.

<script setup lang="ts">
import {
  Shader,
  Dither,
  FilmGrain,
  GridDistortion,
  Sharpness,
  Swirl
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="30" color-a="#1c034f" color-b="#2b4cf0" color-space="oklch" :detail="1.2" :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>