Shaders
header.lightDarkMode D
Gallery

A dynamic, organic shader effect featuring a soft, amorphous blob shape with gradient coloring. The composition has a dark purple background (#2a0730) that provides deep contrast. The primary blob element is centered slightly left and lower in the frame, displaying a smooth gradient transition from magenta/pink (#fa7dd4) on the left side to purple (#a360d4) on the right side. The blob has very soft, feathered edges with significant blur and glow, creating a dreamy, ethereal quality. A subtle yellow highlight (#ffe11a) is visible on the upper-left portion of the blob, adding dimensionality and a glossy appearance. The overall effect is highly blurred and out-of-focus, suggesting motion or intentional defocus. Fine film grain texture is subtly applied across the entire image, adding a subtle noise pattern that enhances the organic, natural feel. The lighting appears to come from the upper-left, creating soft shadows and highlights that give the blob a three-dimensional, liquid-like quality. The mood is atmospheric and contemporary, with smooth color transitions and no hard edges.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#2a0730" />
    <Blob :center="{ x: 0.13, y: 0.95 }" color-a="#a360d4" color-b="#fa7dd4" color-space="oklch" :deformation="5" :seed="88" :size="1.3" :softness="1.5" />
    <FilmGrain :strength="0.15" />
  </Shader>
</template>