Spray Paint 3

A vibrant gradient mesh shader effect featuring four animated blob shapes layered over a solid magenta base color. The composition creates a smooth, flowing transition across the entire canvas. In the upper left quadrant, a warm yellow-to-orange blob (#ffe600 to #ff6b00) with soft edges and subtle highlight creates a glowing orb effect. The upper right features a cyan-to-blue blob (#00e5ff to #3d1dff) positioned at approximately 88% horizontal and 45% vertical, with enhanced softness and a light cyan highlight. The lower center contains a magenta-to-pink blob (#ff00c8 to #ff4dff) with moderate deformation creating organic, undulating edges. The entire composition is unified by a solid magenta background (#ff2d7b) at full opacity. A diffuse blur filter with 100% intensity is applied across all layers, creating a soft, dreamy aesthetic with smooth color transitions and no harsh edges. The blobs feature varying deformation values (0.7-0.9) and highlight intensities (0.5-0.7), creating depth and dimension. The overall effect is a smooth, pastel-like gradient that transitions from warm yellows and oranges on the left, through vibrant magentas and pinks in the center, to cool cyans and blues on the right, with all colors blending seamlessly through the diffuse blur effect.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#ff2d7b" />
    <Blob :center="{ x: 0.12, y: 0.18 }" color-a="#ffe600" color-b="#ff6b00" color-space="oklch" :deformation="0.9" highlight-color="#fffbe0" :highlight-intensity="0.7" :highlight-x="0.2" :highlight-y="0.3" :highlight-z="0.7" :seed="55" :size="1.05" :softness="2" :speed="0.3" />
    <Blob :center="{ x: 0.88, y: 0.45 }" color-a="#00e5ff" color-b="#3d1dff" color-space="oklch" :deformation="0.7" highlight-color="#b8ffec" :highlight-x="0.4" :highlight-z="0.6" :seed="31" :size="0.85" :softness="2.5" :speed="0.28" />
    <Blob :center="{ x: 0.48, y: 0.87 }" color-a="#ff00c8" color-b="#ff4dff" color-space="oklch" :deformation="0.85" highlight-color="#ffaaee" :highlight-intensity="0.6" :highlight-x="-0.3" :highlight-y="-0.4" :highlight-z="0.5" :seed="14" :size="0.95" :softness="2" :speed="0.35" />
    <DiffuseBlur edges="mirror" :intensity="100" :visible="true" />
  </Shader>
</template>