Shaders
header.lightDarkMode D
Gallery

A soft, blurred gradient shader effect featuring a smooth transition of colors across the canvas. The composition shows a dominant purple swirl on the left side that gradually transitions through blue and cyan tones toward the right edge. An orange-coral glow emanates from the upper-center area, creating a warm focal point that contrasts with the cool purples and cyans. The effect employs heavy Gaussian blur with soft, feathered edges that create an ethereal, dreamlike quality. Multiple layered swirls with different rotation speeds and blend modes create depth and movement, though the overall effect appears static in this frame. The FilmGrain overlay adds subtle texture and noise throughout, preventing the gradient from appearing too smooth and artificial. The color transitions are organic and flowing, with no hard edges, suggesting a liquid or atmospheric quality. The lighting appears to come from multiple sources - warm from the upper-middle area and cool from the edges - creating a balanced, harmonious composition. The entire image has a soft-focus, bokeh-like quality that suggests motion blur or intentional defocus.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl color-a="#fd6012" color-b="#ccf9f7" />
    <Swirl blend-mode="normal-oklab" color-a="#8085b7" color-b="#9042bb" color-space="oklch" :detail="1.6" mask-source="idmld8md3zu0rcr8lsf" :speed="0.3" />
    <FilmGrain :strength="0.4" />
    <Blob id="idmld8md3zu0rcr8lsf" :center="{ x: 0.12, y: 0.49 }" :size="0.9" :softness="2" :visible="false" />
  </Shader>
</template>