Shaders
header.lightDarkMode D
Gallery

A vibrant gradient shader effect featuring a dynamic blend of warm colors transitioning smoothly across the canvas. The primary composition shows diagonal wave patterns flowing from the upper left to lower right, with dominant orange and magenta hues creating a fluid, organic motion. The Swirl component generates color interpolation between orange (#ff4400) and magenta (#ff0066) with a detail level of 2.5, creating soft, blended transitions. A Blob element positioned at coordinates (0.92, 0.12) in the upper right adds a warm orange-red focal point (#ee2200 to #ff6600) with soft edges and a highlight intensity of 0.8, creating dimensional depth. The WaveDistortion effect at 98 degrees with sine wave pattern and frequency 4.2 creates subtle undulating distortions across the surface, giving the gradient a liquid, breathing quality. A ChromaticAberration effect with 0.04 strength and red/blue offsets of ±1.5 adds microscopic color separation, enhancing the visual complexity. The Glow component with screen blend mode and 0.14 intensity creates a luminous, ethereal quality throughout. Film grain at 0.15 strength adds subtle texture and grittiness. The overall effect is a warm, energetic gradient with smooth color transitions, gentle wave distortions, and a soft, glowing atmosphere that feels organic and dynamic.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <FilmGrain :strength="0.15">
      <Glow blend-mode="screen" :intensity="0.14" :size="15" :threshold="0.35">
        <Swirl color-a="#ff4400" color-b="#ff0066" color-space="lch" :detail="2.5" :speed="0.8" />
        <Blob :center="{ x: 0.92, y: 0.12 }" color-a="#ee2200" color-b="#ff6600" color-space="oklch" :deformation="1" highlight-color="#ffaa33" :highlight-intensity="0.8" :highlight-x="0.5" :highlight-y="-0.5" :highlight-z="0.8" :opacity="0.9" :seed="42" :size="0.78" :softness="2.4" :speed="1.2" :visible="true" />
        <WaveDistortion :angle="98" edges="mirror" :frequency="4.2" :speed="2.5" :strength="0.18" :visible="true" />
        <ChromaticAberration :angle="142" :blue-offset="1.5" :red-offset="-1.5" :strength="0.04" :visible="true" />
      </Glow>
    </FilmGrain>
  </Shader>
</template>