Shaders
header.lightDarkMode D
Gallery

A dynamic gradient shader effect featuring a soft, organic blob shape with smooth color transitions. The composition has a dark purple-black background (#24082e) that provides deep contrast. The primary visual element is a large, amorphous blob positioned in the upper-right to center area, featuring a gradient that transitions from magenta-pink (#b9359a) on the left side to periwinkle-blue (#616ad4) on the right side. The blob has extremely soft, feathered edges with a softness value of 2, creating a diffused, cloud-like appearance with no hard boundaries. The shape exhibits organic deformation with a deformation value of 5, giving it an irregular, flowing form that suggests gentle animation. A subtle highlight effect is visible with a warm yellow-amber tone (#ffe11a) positioned in the upper-left quadrant of the blob at coordinates (0.3, -0.3), creating a subtle luminous accent with 0.5 intensity. The overall effect has a dreamy, ethereal quality with smooth color blending in OKLab color space. A fine film grain texture with 0.1 strength is applied across the entire composition, adding subtle texture and visual noise that enhances the atmospheric quality. The color transitions are smooth and gradual, creating a vaporwave or synthwave aesthetic with a moody, contemplative atmosphere.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#24082e" />
    <Blob :center="{ x: 0.9, y: 0.25 }" color-a="#b9359a" color-b="#616ad4" color-space="oklab" :deformation="5" :seed="72" :size="1.35" :softness="2" />
    <FilmGrain :strength="0.1" />
  </Shader>
</template>