Spray Paint 5

A sophisticated gradient shader effect featuring a deep blue color palette with multiple layered blob elements creating an organic, fluid aesthetic. The base is a solid dark navy color (#0a1e3d) that establishes a deep, professional foundation. Three animated blob shapes are strategically positioned: one in the upper right area with medium blue tones (#1a5fa8 to #0b3b6e) featuring a bright cyan highlight (#4da8e8), another in the lower left with lighter blue gradients (#2478c9 to #90c8f8) and pale blue highlights (#b8ddfb), and a central blob with sky blue to dark blue transitions (#5eabea to #143d6b) with a very light blue highlight (#d4ecff). The blobs have soft, feathered edges with varying deformation values creating organic, non-geometric shapes. A diffuse blur effect with 100% intensity is applied across the entire composition, creating a smooth, atmospheric quality that softens all edges and creates depth. The overall effect is a serene, modern gradient with subtle light sources creating highlights that suggest dimensionality and movement. The color transitions are smooth and flowing, with the lighter blue highlights appearing to emanate from specific points within each blob, creating a sense of internal luminosity and depth.

Code

vue

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#0a1e3d" />
    <Blob :center="{ x: 0.82, y: 0.18 }" color-a="#1a5fa8" color-b="#0b3b6e" color-space="oklch" :deformation="0.9" highlight-color="#4da8e8" :highlight-intensity="0.7" :highlight-x="0.2" :highlight-y="0.3" :highlight-z="0.7" :seed="55" :size="1.05" :softness="2.5" :speed="0.3" />
    <Blob :center="{ x: 0.15, y: 0.82 }" color-a="#2478c9" color-b="#90c8f8" color-space="oklch" :deformation="0.7" highlight-color="#b8ddfb" :highlight-x="0.4" :highlight-z="0.6" :seed="38" :size="0.85" :softness="2" :speed="0.28" />
    <Blob :center="{ x: 0.48, y: 0.45 }" color-a="#5eabea" color-b="#143d6b" color-space="oklch" :deformation="1" highlight-color="#d4ecff" :highlight-intensity="0.6" :highlight-x="-0.3" :highlight-y="-0.4" :highlight-z="0.5" :seed="14" :size="0.7" :softness="3" :speed="0.35" />
    <DiffuseBlur edges="mirror" :intensity="100" :visible="true" />
  </Shader>
</template>