Spray Paint 4
Spray PaintA soft, ethereal gradient shader effect featuring a predominantly cool-toned color palette. The composition consists of a dark slate blue base (#2a3d5c) overlaid with three animated blob shapes that create a dreamy, atmospheric effect. The upper right area features a large lavender-to-light-blue blob (#a8c8e8 to #d4b8e0) with soft, organic edges and a subtle highlight at approximately 20% from the left and 30% from the top, creating dimension and depth. The left side contains a smaller teal-to-blue blob (#7eb8c9 to #94a3d1) positioned at roughly 12% horizontally and 25% vertically, with moderate softness and a cooler highlight. The lower center area features the largest blob (#c4aed0 to #8ba7bf), blending purple and muted blue tones with the highest softness value (3.0), creating a very diffuse, cloud-like appearance. All blobs have high deformation values (0.7-0.9), giving them organic, flowing shapes rather than perfect circles. A diffuse blur effect with 100% intensity is applied across the entire composition, creating a smooth, frosted glass aesthetic. The overall mood is serene and meditative, with soft light diffusion throughout, no hard edges, and a gentle gradient transition from darker tones in the lower left to lighter, more luminous areas in the upper right. The color space uses OKLCH for perceptually uniform color transitions.
Code
<script setup lang="ts">
import {
Shader,
Blob,
DiffuseBlur,
SolidColor
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<SolidColor color="#2a3d5c" />
<Blob :center="{ x: 0.82, y: 0.18 }" color-a="#a8c8e8" color-b="#d4b8e0" color-space="oklch" :deformation="0.7" highlight-color="#e0d4f0" :highlight-intensity="0.7" :highlight-x="0.2" :highlight-y="0.3" :highlight-z="0.7" :seed="55" :size="0.95" :softness="2.5" :speed="0.3" />
<Blob :center="{ x: 0.12, y: 0.25 }" color-a="#7eb8c9" color-b="#94a3d1" color-space="oklch" :deformation="0.9" highlight-color="#b8d4e8" :highlight-x="0.4" :highlight-z="0.6" :seed="31" :size="0.75" :softness="2" :speed="0.28" />
<Blob :center="{ x: 0.45, y: 0.85 }" color-a="#c4aed0" color-b="#8ba7bf" color-space="oklch" :deformation="0.85" highlight-color="#d0e0f0" :highlight-intensity="0.6" :highlight-x="-0.3" :highlight-y="-0.4" :highlight-z="0.5" :seed="14" :size="1.05" :softness="3" :speed="0.25" />
<DiffuseBlur edges="mirror" :intensity="100" :visible="true" />
</Shader>
</template>