Shaders
header.lightDarkMode D
Gallery

A dynamic, organic shader effect featuring a dark navy background (#16023b) with a prominent amorphous blob shape positioned in the lower-left to center area. The blob displays a smooth gradient transition from vibrant purple (#7f1aeb) to muted mauve-pink (#bc7ec0), creating a soft, luminous quality. The blob has organic, undulating edges with high softness, giving it a fluid, cloud-like appearance. A bright yellow highlight (#ffe11a) is positioned in the upper-left quadrant of the blob, creating a glossy, three-dimensional lighting effect that suggests a light source. The entire composition is overlaid with subtle film grain texture at 20% opacity, adding a cinematic quality and slight visual noise. The blob appears to be in motion or deformation state with a seed value of 1, creating natural-looking organic distortions. The overall mood is ethereal and modern, with the purple-to-pink gradient creating a sense of depth and the highlight adding dimensionality. The effect has a soft focus quality with transparent edges that blend seamlessly into the dark background.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <SolidColor color="#16023b" />
    <Blob :center="{ x: 0.37, y: 0.86 }" color-a="#7f1aeb" color-b="#bc7ec0" color-space="oklab" :deformation="5" :size="1.25" :softness="1" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>