Shaders
header.lightDarkMode D
Gallery

A smooth, flowing gradient shader effect that transitions diagonally from cool purple and lavender tones in the upper left to warm peachy-orange hues in the lower right. The primary LinearGradient component creates the foundational color transition using OKLCH color space, flowing from #a9acde (soft lavender) to #f5b293 (warm peach). Overlaid on this base is a soft, organic Blob element centered slightly left of center, featuring magenta and hot pink tones (#e697db to #ff26d0) with a subtle blue highlight (#1a85ff) positioned in the upper left quadrant of the blob, creating a three-dimensional lighting effect. The blob has high deformation (0.9) creating an irregular, organic shape with soft edges (softness: 2). A DotGrid pattern with white dots at 40% density and 0.05 size is applied with 30% opacity using linear dodge blending, creating a subtle sparkle or texture overlay across the entire surface. A Liquify effect with intensity 2 and mirror edge handling adds subtle fluid distortion throughout. Finally, a FilmGrain effect at 0.09 strength adds fine noise texture for a cinematic quality. The overall mood is ethereal and dreamy with a soft, glowing atmosphere.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#a9acde" color-b="#f5b293" color-space="oklch" edges="mirror" :end="{ x: 0.79, y: 0.7 }" :start="{ x: 0.23, y: 0.32 }" :visible="true" />
    <Blob blend-mode="normal-oklch" :center="{ x: 0.32, y: 0.49 }" color-a="#e697db" color-b="#ff26d0" color-space="oklch" :deformation="0.9" highlight-color="#1a85ff" :highlight-x="-0.21" :highlight-z="0.67" :size="1" :softness="2" :speed="1" />
    <DotGrid blend-mode="linearDodge" :density="40" :dot-size="0.05" :opacity="0.3" />
    <Liquify :decay="1" edges="mirror" :intensity="2" :radius="2" :swirl="0" />
    <FilmGrain :strength="0.09" />
  </Shader>
</template>