Subtle Liquid 9

A sophisticated gradient-based shader effect featuring a smooth transition from deep navy blue (#1a3a6b) to light periwinkle blue (#a8c8f0) across a diagonal axis. The gradient flows from the lower-left toward the upper-right, creating a sense of depth and movement. Overlaid on this base is a large, organic blob shape positioned in the upper-center-right area, rendered in darker blue tones (#2e5a9e to #0b1f42) with soft, feathered edges that create a subtle vignette effect. The blob features a highlight accent in the upper-left region with a pale blue-white color (#c0d8f8) at moderate intensity (0.5), giving it dimensional depth and a glossy appearance. A fine white dot grid pattern is subtly visible across the entire composition at 15% opacity, using a linear dodge blend mode that creates a delicate sparkle effect without overwhelming the base colors. The liquify effect with a decay of 2.2 adds subtle wave-like distortions and organic undulation to the overall composition, softening hard edges and creating a fluid, dreamlike quality. A light film grain texture (0.18 strength) is applied uniformly, adding subtle noise and texture that prevents the image from appearing too smooth or artificial. The overall mood is serene, professional, and atmospheric with a cool color temperature dominated by blue hues.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient color-a="#1a3a6b" color-b="#a8c8f0" color-space="oklch" edges="mirror" :end="{ x: 0.67, y: 0.28 }" :start="{ x: 0.23, y: 0.7 }" :visible="true" />
    <Blob blend-mode="normal-oklch" :center="{ x: 0.58, y: 0.42 }" color-a="#2e5a9e" color-b="#0b1f42" color-space="oklch" :deformation="0.7" highlight-color="#c0d8f8" :size="0.65" :softness="1.2" :speed="1" />
    <DotGrid blend-mode="linearDodge" :density="65" :dot-size="0.08" :opacity="0.15" />
    <Liquify :decay="2.2" edges="mirror" :intensity="1.2" :radius="2" />
    <FilmGrain :strength="0.18" />
  </Shader>
</template>