Shaders
header.lightDarkMode D
Gallery

A soft, blurred gradient composition dominated by warm and cool tones creating a dreamy, ethereal atmosphere. The image features a primary magenta-pink (#e3408a) base that transitions smoothly into peachy-tan (#edbd55) and dusty rose (#d4876e) hues. A prominent organic blob shape with purple-mauve undertones (#a34d7a) is positioned slightly right of center, creating depth through soft, feathered edges. The blob exhibits subtle internal highlights with a white luminous quality (#ffffff) at approximately 40% horizontal and -40% vertical offset, suggesting a light source. Gentle wave distortions ripple across the entire composition at a 122-degree angle, creating subtle undulating patterns that enhance the fluid, organic feel. The overall effect is heavily blurred and soft-focused, with chromatic aberration adding microscopic color fringing at 45-degree angles. Fine film grain texture overlays the entire image at low opacity, adding subtle noise and tactile quality. The composition has a warm, inviting mood with smooth color transitions and no sharp edges, creating a meditative, abstract aesthetic. The spatial arrangement suggests depth with the blob appearing to float within the gradient field.

Code

vue
<script setup lang="ts">
import {
  Shader,
  Blob,
  ChromaticAberration,
  FilmGrain,
  Swirl,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="45" color-a="#e3408a" color-b="#edbd55" color-space="oklab" :detail="1.8" :speed="0.8" />
    <Blob :center="{ x: 0.72, y: 0.52 }" color-a="#d4876e" color-b="#a34d7a" color-space="oklab" :deformation="0.8" highlight-color="#ffffff" :highlight-intensity="0.3" :highlight-x="0.4" :highlight-y="-0.4" :highlight-z="0.6" :seed="17" :size="0.78" :softness="1.2" :speed="0.9" />
    <WaveDistortion :angle="122" edges="mirror" :frequency="2.8" :speed="1.8" :strength="0.14" />
    <ChromaticAberration :angle="45" :blue-offset="1.2" :red-offset="-1.2" :strength="0.015" />
    <FilmGrain :strength="0.12" />
  </Shader>
</template>