Shaders
header.lightDarkMode D
Gallery

Watercolor on Paper 4

Watercolor on Paper

A smooth, flowing gradient shader effect that transitions from warm golden-yellow tones in the upper left corner through coral and salmon orange hues in the center, to deep crimson red in the upper right, and rich magenta-purple in the lower right corner. The gradient features five color anchor points creating a multi-directional color flow with a bright, almost white highlight area in the center-left portion. The effect is softened by a wave distortion applied at a 232-degree angle with sine wave characteristics, creating subtle undulating ripples across the surface. A liquify effect with moderate intensity (10) and high stiffness (15) adds organic, fluid warping to the gradient, creating soft bulges and subtle deformations. The overall composition is further refined by a paper texture overlay with minimal roughness (0.1) and fine grain scale (0.1), adding subtle surface irregularity and tactile quality. A film grain effect with 0.4 strength introduces fine noise particles throughout, creating a cinematic, slightly aged appearance. The edges fade to transparency, and the entire composition maintains full opacity with normal blending mode, resulting in a warm, organic, and slightly textured gradient that feels both smooth and naturally imperfect.

Code

vue
<script setup lang="ts">
import {
  Shader,
  FilmGrain,
  Liquify,
  MultiPointGradient,
  Paper,
  WaveDistortion
} from 'shaders/vue'
</script>

<template>
  <Shader
    :disable-telemetry="true"
  >
    <MultiPointGradient color-a="#c43a2f" color-b="#f5a623" color-c="#8b2252" color-d="#ffd4a1" color-e="#e05c1a" :position-a="{ x: 0.72, y: 0.12 }" :position-b="{ x: 0.15, y: 0.35 }" :position-c="{ x: 0.88, y: 0.78 }" :position-d="{ x: 0.35, y: 0.92 }" :position-e="{ x: 0.55, y: 0.48 }" />
    <WaveDistortion :angle="232" :frequency="1.2" :strength="0.35" />
    <Liquify :damping="0.7" :radius="1.5" :stiffness="15" />
    <Paper :displacement="1" :grain-scale="0.1" :roughness="0.1" :seed="42" />
    <FilmGrain :strength="0.4" />
  </Shader>
</template>