Shaders
header.lightDarkMode D
Gallery

A dynamic gradient shader effect dominated by warm to hot color transitions. The image features a primary swirling motion that blends deep red (#e63412) with golden yellow (#ffb703) in a fluid, organic pattern. A prominent blob-like formation is centered slightly right and below center (at coordinates 0.72, 0.58), creating a darker magenta-to-orange gradient (#ff4400 to #8b0045) with soft, deformed edges and a subtle white highlight suggesting dimensional depth. The entire composition is overlaid with subtle wave distortions at a 122-degree angle, creating a rippling effect that undulates across the surface at moderate speed. A fine chromatic aberration effect with red and blue channel separation adds a slight color fringing at the edges of color transitions, enhancing the sense of movement and energy. The overall atmosphere is warm, energetic, and fluid, with soft focus areas that create depth. A light film grain texture adds subtle noise throughout, preventing the gradients from appearing too smooth and artificial. The color space transitions between HSV for the swirl and OKLCH for the blob create rich, saturated hues with smooth interpolation.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="45" color-a="#e63412" color-b="#ffb703" color-space="hsv" :detail="1.8" :speed="0.8" />
    <Blob :center="{ x: 0.72, y: 0.58 }" color-a="#ff4400" color-b="#8b0045" color-space="oklch" :deformation="0.8" highlight-color="#ffffff" :highlight-intensity="0.3" :highlight-x="0.4" :highlight-y="-0.4" :highlight-z="0.6" :seed="17" :size="1.15" :softness="1.4" :speed="0.9" />
    <WaveDistortion :angle="122" edges="mirror" :frequency="2.1" :speed="1.8" :strength="0.35" />
    <ChromaticAberration :angle="45" :blue-offset="1.2" :red-offset="-1.2" :strength="0.015" />
    <FilmGrain :strength="0.12" />
  </Shader>
</template>