Spray Paint 2

A soft, dreamy gradient shader effect featuring a smooth blend of pastel colors across the entire canvas. The composition consists of a teal base layer (#4bdbca) overlaid with three animated blob shapes that create organic, flowing forms. The upper-left area transitions through yellow and light-green tones (#bdf7a7, #d9ec11), while the center and right portions feature cyan and light-blue hues (#84d6fd, #628aa5). A prominent magenta-purple gradient (#d559be) emerges from the lower-center area, creating a warm-cool color contrast. The largest blob positioned at the bottom center has the highest softness value (3), creating a diffused, cloud-like appearance. All blobs feature highlight colors that add luminous accents - pale yellow (#ffeaa7) in the upper-right blob and bright cyan (#74b9ff) in the left blob. A diffuse blur filter with 100% intensity applied as the final layer creates an overall soft-focus, ethereal quality. The effect has no hard edges, with all components using transparent edge masking. The color space uses OKLCH for perceptually uniform color transitions, resulting in smooth gradations between complementary warm and cool tones. The overall mood is calming and meditative, with a gentle, flowing animation potential from the blob speed parameters.

Code

vue

<script setup lang="ts">
import {
  Shader,
  Blob,
  DiffuseBlur,
  SolidColor
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#4bdbca" />
    <Blob :center="{ x: 0.72, y: 0.22 }" color-a="#bdf7a7" color-b="#628aa5" color-space="oklch" :deformation="0.6" highlight-color="#ffeaa7" :highlight-intensity="0.7" :highlight-x="0.2" :highlight-y="0.3" :highlight-z="0.7" :seed="42" :size="0.8" :softness="2" :speed="0.35" />
    <Blob :center="{ x: 0.16, y: 0.37 }" color-a="#d9ec11" color-b="#5899b3" color-space="oklch" :deformation="0.8" highlight-color="#74b9ff" :highlight-x="0.4" :highlight-z="0.6" :seed="23" :size="0.6" :softness="2" :speed="0.25" />
    <Blob :center="{ x: 0.42, y: 1 }" color-a="#84d6fd" color-b="#d559be" color-space="oklch" :deformation="1" highlight-color="#ffd93d" :highlight-intensity="0.6" :highlight-x="-0.3" :highlight-y="-0.4" :highlight-z="0.5" :seed="7" :size="1.1" :softness="3" :speed="0.3" />
    <DiffuseBlur edges="mirror" :intensity="100" :visible="true" />
  </Shader>
</template>