Shaders
header.lightDarkMode D
Gallery

Watercolor on Paper 2

Watercolor on Paper

A soft, organic gradient shader effect dominated by vibrant green and yellow tones. The composition features a multi-point gradient with five color nodes creating a smooth, flowing transition across the canvas. The primary bright green (#47e647) anchors the left side, transitioning through pale yellow (#fff94d) in the upper right, with darker forest green (#7bbc1a) positioned at the bottom center, complemented by soft lime green (#c2fa93) on the right and deep green (#19b019) in the lower left. The gradient is overlaid with subtle wave distortion at 148 degrees with triangular wave patterns, creating gentle undulating ripples across the surface. A liquify effect with high intensity (10) and stiffness (15) adds organic, fluid warping that softens edges and creates a breathing, living quality. The paper texture with minimal roughness (0.1) provides fine surface detail, while film grain at 0.4 strength adds a subtle cinematic quality. The overall effect is smooth and dreamy with soft focus areas, particularly a prominent blur in the lower right quadrant. The edges fade to transparency, creating a vignette-like effect. The mood is peaceful, natural, and slightly ethereal with a liquid, flowing aesthetic.

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="#47e647" color-b="#fff94d" color-c="#7bbc1a" color-d="#c2fa93" color-e="#19b019" :position-a="{ x: 0.24, y: 0.08 }" :position-b="{ x: 0.83, y: 0.04 }" :position-c="{ x: 0.6, y: 1 }" :position-d="{ x: 0.78, y: 0.48 }" :position-e="{ x: 0.07, y: 0.87 }" />
    <WaveDistortion :angle="148" :frequency="1.6" :strength="0.25" wave-type="triangle" />
    <Liquify :damping="0.7" :radius="1.5" :stiffness="15" />
    <Paper :displacement="1" :grain-scale="0.1" :roughness="0.1" :seed="26" />
    <FilmGrain :strength="0.4" />
  </Shader>
</template>