Shaders
header.lightDarkMode D
Gallery

A dynamic swirling gradient effect dominated by yellow and olive-green tones that flow organically across the canvas. The primary Swirl component creates smooth, curved wave patterns using colors #c2c506 (mustard yellow) and #f7d32c (bright yellow), blended at 58% opacity with a detail level of 1.8, producing soft, flowing transitions. The GridDistortion effect with intensity 5 and 75-pixel grid size introduces subtle geometric warping and pixelation throughout, creating a slightly fragmented, mosaic-like texture that breaks up the smooth gradients. A Dither effect with overlay blending mode and 5-pixel pixelation adds fine-grained texture and visual noise, creating a halftone-like quality with white speckles scattered across the composition. The FilmGrain component at 0.05 strength adds a subtle analog film texture, enhancing the organic feel. The overall atmosphere is warm and energetic, with the yellow-to-olive gradient creating a sense of movement and depth. The combination of swirling motion, grid distortion, and dithering creates a textured, slightly vintage digital aesthetic with visible pixelation and grain throughout.

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="#c2c506" color-b="#f7d32c" color-space="hsl" :detail="1.8" :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>