Shaders
header.lightDarkMode D
Gallery

A vibrant gradient shader effect featuring a warm-to-cool color transition. The left and center portions display a golden yellow (#fbbf24) to orange (#f59e0b) gradient with a bright, glowing highlight in the upper-center area creating a luminous focal point. The right side transitions dramatically into cool tones with cyan (#06b6d4), light-blue (#0ea5e9), and dark-blue (#1e40af) creating a sharp color boundary. The effect includes subtle film grain texture overlay (0.75 strength) providing a grainy, organic quality throughout. A progressive blur radiates from the upper-right corner (315-degree angle) with moderate falloff creating depth. The swirl component generates flowing, turbulent patterns in the blue regions with medium complexity (5.5), while a soft blob element centered at the lower-left adds organic, amorphous shapes with 0.85 softness and a pale yellow highlight (#fef3c7). Wave distortion with sine waves (3.5 frequency) at 45 degrees adds subtle undulating movement to the entire composition. The overall mood is energetic and dynamic, with smooth color gradations and soft, blurred edges creating an atmospheric, dreamlike quality.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <FilmGrain :animated="0" :strength="0.75">
      <ProgressiveBlur :angle="315" :center="{ x: 0.75, y: 0.25 }" :falloff="0.4" :intensity="750">
        <Swirl :blend="65" :coarse-x="50" :coarse-y="50" color-a="#1e40af" color-b="#06b6d4" color-c="#0ea5e9" color-space="oklch" :complexity="5.5" :detail="0.75" :fine-x="50" :fine-y="50" :medium-x="50" :medium-y="50" :scale="4.5" :speed="0.8" />
        <Blob blend-mode="normal-oklch" :center="{ x: 0.25, y: 0.75 }" color-a="#fbbf24" color-b="#f59e0b" color-space="oklab" :deformation="0.6" highlight-color="#fef3c7" :highlight-intensity="0.8" :highlight-y="-0.25" :seed="42" :size="1.1" :softness="0.85" :speed="1.2" />
        <WaveDistortion :angle="45" edges="mirror" :frequency="3.5" :speed="2.7" :strength="0.22" />
      </ProgressiveBlur>
    </FilmGrain>
  </Shader>
</template>