Shaders
header.lightDarkMode D
Gallery

Watercolor on Paper 7

Watercolor on Paper

A smooth, flowing gradient shader with five distinct color nodes creating a multi-point radial blend. The composition features a warm orange (#e85d2c) in the upper right, transitioning through peachy tones (#f29f6b) in the center-right area. A cool blue (#2c8ae8) dominates the left side, while a darker navy blue (#1b5fa0) anchors the lower left quadrant. A golden yellow (#d4a32e) appears in the lower right corner. The gradient is highly smoothed with a smoothness value of 2.05, creating soft, almost imperceptible color transitions. A sine wave distortion at 232 degrees with 0.35 strength adds subtle undulating ripples across the surface, creating a liquid-like quality. The liquify effect with intensity 10 and stiffness 15 introduces organic, fluid warping that softens edges and creates a dreamlike, melting appearance. A fine paper texture with 0.1 grain scale and 1 displacement adds subtle surface irregularity, while film grain at 0.4 strength introduces a delicate noise pattern throughout. The overall effect is a warm-to-cool gradient with soft, organic distortions that evoke a sunset or aurora-like atmosphere with a slightly textured, analog quality.

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="#e85d2c" color-b="#2c8ae8" color-c="#d4a32e" color-d="#1b5fa0" color-e="#f29f6b" :position-a="{ x: 0.72, y: 0.12 }" :position-b="{ x: 0.15, y: 0.35 }" :position-c="{ x: 0.88, y: 0.75 }" :position-d="{ x: 0.35, y: 0.88 }" :position-e="{ x: 0.52, y: 0.48 }" :smoothness="2.05" />
    <WaveDistortion :angle="232" :frequency="1.1" :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>