Toxic Bloom
Toxic BloomA dynamic, organic shader effect featuring layered fluid-like formations with distinct color zones. The composition shows a central blue region (#0d778f) with bright lime-green highlights (#99fa2a) creating luminous accents along the edges and surface details. Dark green and purple-brown tones (#143620, #362238) form the outer boundaries and create depth through swirling patterns. The effect demonstrates significant blur and softness, particularly radiating from the center outward, creating a hazy, atmospheric quality. The blob-like formations have irregular, organic edges with pronounced deformation and highlight effects that suggest a 3D volumetric quality. The overall mood is ethereal and fluid, with a sense of movement and transformation. The color transitions are smooth and gradient-like, blending between cool blues and vibrant yellows in the center, while warmer earth tones anchor the periphery. The progressive blur effect creates depth layering, making the composition feel dimensional despite being a 2D shader. The flow field distortion adds subtle wave-like ripples throughout, enhancing the sense of liquid motion and organic growth.
Code
<script setup lang="ts">
import {
Shader,
Blob,
FlowField,
ProgressiveBlur,
Swirl
} from 'shaders/vue'
</script>
<template>
<Shader
:disable-telemetry="true"
>
<Swirl :blend="5" color-a="#143620" color-b="#362238" color-space="oklch" :detail="0.5" :speed="0.3" />
<Blob blend-mode="normal-oklch" color-a="#0d778f" color-b="#99fa2a" color-space="oklab" :deformation="1" highlight-color="#ffe01a" :highlight-intensity="0.35" :highlight-x="-0.1" :highlight-y="-0.01" :highlight-z="0.13" :softness="0.43" />
<ProgressiveBlur :angle="90" :center="{ x: 0.5, y: 0.5 }" :falloff="0.47" :intensity="1000" />
<FlowField :detail="4.4" :speed="1" />
</Shader>
</template>