Shaders
header.lightDarkMode D
Gallery

A smooth, flowing gradient shader effect that transitions from deep red (#c41232) in the upper left corner through warm orange (#d4880a) in the center, to golden yellow and peachy tones toward the lower right. The composition features organic, curved wave-like striations that create a sense of depth and movement, resembling layered fabric or liquid surfaces. The waves appear to ripple horizontally across the canvas with varying frequencies - some subtle and broad, others more pronounced and detailed. A soft blob shape with highlights is positioned in the lower right area, adding dimensional depth with warm orange (#f5a623) and pink (#e8365d) tones. The overall effect has a polished, luminous quality with a slight film grain texture overlay that adds subtle noise without disrupting the smooth gradient. The tilt-shift effect creates a gentle focus blur that enhances the three-dimensional appearance. The color space uses oklch for the base swirl and linear for the blob, creating rich, vibrant hues that feel warm and energetic. The entire composition evokes a sense of flowing heat, warmth, and organic movement.

Code

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

<template>
  <Shader
    :disable-telemetry="true"
  >
    <Swirl :blend="52" color-a="#d4880a" color-b="#c41232" color-space="oklch" />
    <WaveDistortion :angle="182" edges="wrap" :frequency="1.5" :strength="0.15" :transform="{ scale: 1.3 }">
      <WaveDistortion :angle="58" edges="mirror" :frequency="13" :speed="0.3" wave-type="sawtooth">
        <Blob :center="{ x: 0.58, y: 0.92 }" color-a="#f5a623" color-b="#e8365d" :deformation="0.7" highlight-color="#ffc61a" :highlight-x="0.5" :size="0.8" :softness="1" />
      </WaveDistortion>
    </WaveDistortion>
    <TiltShift :angle="175" :center="{ x: 0.45, y: 0.52 }" :intensity="90" :width="0.5" />
    <FilmGrain :strength="0.2" />
  </Shader>
</template>