Subtle Liquid 4

A vibrant, flowing gradient shader with a luminous quality. The composition features a primary linear gradient transitioning from deep magenta (#ff1493) in the lower left corner through orange and yellow tones in the center, to bright spring green (#00ff7f) in the upper right corner. The gradient follows a 315-degree angle with mirror edge handling, creating a diagonal sweep across the canvas. Overlaid on this base is an animated blob element centered at coordinates (0.25, 0.25) with warm orange (#ff6b00) to gold (#ffd700) coloring, featuring significant deformation (0.82) and a cyan highlight (#00ffff) positioned at (0.4, 0.2) with 0.7 intensity, creating a glossy, three-dimensional appearance. The blob has soft edges (0.45 softness) and appears to glow with internal luminosity. A subtle white dot grid pattern (density 100, 0.12 dot size) overlays the entire composition with 0.3 opacity using linear dodge blending, adding fine texture and sparkle. The Liquify effect with 0.6 swirl and 1.8 radius creates organic wave distortions throughout, softening hard edges and creating fluid motion. Film grain with 0.21 strength adds subtle noise texture for depth. The overall mood is energetic, warm, and organic with a modern, digital aesthetic. The color space uses OKLCH for perceptually uniform transitions.

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <LinearGradient :angle="315" color-a="#ff1493" color-b="#00ff7f" color-space="oklch" edges="mirror" :end="{ x: 0.79, y: 0.7 }" :start="{ x: 0.23, y: 0.32 }" :visible="true" />
    <Blob blend-mode="normal-oklch" :center="{ x: 0.25, y: 0.25 }" color-a="#ff6b00" color-b="#ffd700" color-space="oklch" :deformation="0.82" highlight-color="#00ffff" :highlight-intensity="0.7" :highlight-x="0.4" :highlight-y="0.2" :highlight-z="0.67" :size="0.325" :softness="0.45" :speed="1.2" />
    <DotGrid blend-mode="linearDodge" :density="100" :dot-size="0.12" :opacity="0.3" />
    <Liquify :decay="3.3" edges="mirror" :intensity="1.2" :radius="1.8" :swirl="0.6" />
    <FilmGrain :strength="0.21" />
  </Shader>
</template>