Shaders
header.lightDarkMode D
Gallery

A vibrant gradient shader effect featuring smooth, flowing color transitions dominated by warm tones. The composition displays a diagonal swirl pattern flowing from the lower-left to upper-right, with a bright yellow-to-orange core that gradually transitions into magenta and pink hues toward the edges. A prominent blob-like form is positioned in the upper-right quadrant, creating a soft, luminous highlight with white specular reflection. The entire effect is characterized by smooth, blurred color gradations with no hard edges, suggesting heavy use of softness and blur. Wave distortion creates subtle undulating patterns across the surface, particularly visible in the color transitions. A slight chromatic aberration effect adds dimensional depth to the color boundaries. Fine film grain texture is subtly visible throughout, adding a slight grittiness to the otherwise smooth gradient. The overall mood is energetic and warm, with a dreamy, liquid quality enhanced by the soft transitions and gentle distortions. The color space appears to be in OKLCH, providing perceptually uniform transitions between the warm and cool tones.

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="#ff3d9a" color-b="#ffd93d" color-space="oklch" :detail="1.8" :speed="0.8" />
    <Blob :center="{ x: 0.72, y: 0.35 }" color-b="#f72585" 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="0.65" :softness="0.85" :speed="0.9" />
    <WaveDistortion :angle="135" edges="mirror" :frequency="3.5" :speed="1.8" :strength="0.08" />
    <ChromaticAberration :angle="45" :blue-offset="1.2" :red-offset="-1.2" :strength="0.015" />
    <FilmGrain :strength="0.12" />
  </Shader>
</template>