Shaders
header.lightDarkMode D
Gallery

A 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

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