Shaders
header.lightDarkMode D
Gallery

A vibrant gradient shader effect transitioning from deep red and magenta tones in the upper left to warm golden and tan hues in the lower right. The composition features a swirling vortex pattern centered in the upper-middle area, created by the Swirl component with colors #eb3f9c (magenta-pink) and #f20704 (bright red) blending at 58% intensity. The swirl creates organic, flowing curves that radiate outward with a speed of 0.6. Overlaid on this base are subtle texture effects: a dithering pattern with white overlay at 45% threshold creating a grainy, stippled appearance across the entire surface; a grid distortion effect with 75-pixel grid size and intensity of 5 producing subtle warping and displacement; and fine film grain at 0.05 strength adding photographic texture. The overall effect creates a warm, energetic atmosphere with smooth color transitions interrupted by fine textural details. The edges fade to transparency, and the entire composition maintains full opacity while the underlying grid distortion creates subtle undulations in the color field.

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="#eb3f9c" color-b="#f20704" color-space="hsl" :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>