Shaders
header.lightDarkMode D
Gallery

A vibrant gradient shader effect featuring a smooth radial blend of warm and cool colors. The composition centers on a bright yellow-white core positioned slightly right of center, transitioning outward through orange and pink tones. The gradient flows diagonally from the bottom-left (magenta/pink) through the center (yellow) to the upper-right (cyan/light-blue), creating a warm-to-cool color progression. A soft, organic blob shape with purple and yellow coloring adds dimensional depth in the center-right area, with a subtle greenish highlight creating a luminous focal point. The entire effect is overlaid with a fine film grain texture that adds subtle noise and organic quality. A barely perceptible dot grid pattern with white dots using linear dodge blending creates a delicate sparkle effect throughout. The liquify effect introduces gentle wave distortions that soften all edges and create a fluid, dreamlike quality. The overall mood is energetic yet smooth, with soft focus transitions between color zones and a glowing, ethereal atmosphere. The color space uses OKLCH for perceptually uniform transitions.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Blob,
  DotGrid,
  FilmGrain,
  LinearGradient,
  Liquify
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient :angle="45" color-a="#e91e63" color-b="#00bcd4" color-space="oklch" edges="mirror" :end="{ x: 0.1, y: 0.1 }" :start="{ x: 0.9, y: 0.9 }" :visible="true" />
    <Blob blend-mode="normal-oklch" :center="{ x: 0.6, y: 0.66 }" color-a="#ffeb3b" color-b="#9c27b0" color-space="oklch" highlight-color="#00ff88" :highlight-intensity="0.55" :highlight-x="0.4" :highlight-y="0.2" :highlight-z="0.67" :size="0.65" :softness="0.73" :speed="1" />
    <DotGrid blend-mode="linearDodge" :density="100" :dot-size="0.08" :opacity="0.3" />
    <Liquify :decay="3.2" edges="mirror" :intensity="0.7" :radius="2.69" :swirl="0.11" />
    <FilmGrain :strength="0.48" />
  </Shader>
</template>