Subtle Liquid 8
Subtle LiquidA smooth, flowing gradient shader effect transitioning from teal-cyan tones on the left side to deep blue on the right side. The primary gradient flows diagonally from lower-left to upper-right, creating a sense of depth and movement. A soft, organic blob shape with subtle iridescent highlights is positioned slightly left of center, featuring colors ranging from turquoise (#2ec4b6) to deeper blue (#0b6e99). The blob has a luminous quality with a bright cyan-green highlight (#7efff0) positioned in the upper-left area, creating a three-dimensional lighting effect. A very subtle dot grid pattern is visible throughout, adding fine texture detail with low opacity (15%). The entire composition is enhanced with a liquify effect that creates gentle wave-like distortions, giving the surface a liquid, undulating quality. A fine film grain texture is applied at low strength (0.18) to add subtle noise and visual interest. The overall atmosphere is serene and ethereal, with soft, diffused lighting and smooth color transitions creating a calming, water-like ambiance.
Code
<script setup lang="ts">
import {
Shader,
Blob,
DotGrid,
FilmGrain,
LinearGradient,
Liquify
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<LinearGradient color-a="#0a7a8c" color-b="#1b3fa0" 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.42, y: 0.55 }" color-a="#2ec4b6" color-b="#0b6e99" color-space="oklch" :deformation="0.7" highlight-color="#7efff0" :size="0.7" :softness="1.4" :speed="1" />
<DotGrid blend-mode="linearDodge" :density="60" :dot-size="0.08" :opacity="0.15" />
<Liquify :decay="2.2" edges="mirror" :intensity="1.2" :radius="2" />
<FilmGrain :strength="0.18" />
</Shader>
</template>