Shaders
header.lightDarkMode D
Gallery

A 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

vue
<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>