Interaction

Hover the catalog preview to play; detail auto-starts. With cursor interaction enabled, pointer movement or keyboard focus warps nearby pigment.

States

Canvas 320 × 230; offset 0, 0 px; scale 1. The pigment field evolves continuously without reversing.

Timing

Linear base clock 12000 ms; delay 0 ms; flow speed 0.6×. Accumulate time across repeats so the texture never jumps to the first frame.

Enter and exit

Flow continuously. Leaving a catalog card restores the still poster; leaving the surface clears the local warp. Cursor interaction is disabled.

Repeated input and interruption

Pause holds the texture; Play resumes the same clock. Color, appearance and speed edits preserve elapsed time. Observation speed and pointer position are excluded from JSON.

Reduced motion

Respect reduced motion: render a still watercolor frame with no animation or pointer warp.

Watercolor settings

Colors #0A0A0A / #E0E0E0; speed 0.6; scale 0.6; warp speed 0.08; opacity 1; additive RGB offset 0.15; cursor interaction false; cursor intensity 1.

Version notes

This version uses five gradient-noise layers without paper grain and lower domain-warp coefficients than the six-layer Flow version. Original instead uses value noise and a grain texture. All three share a settings format; recipeId preserves the chosen renderer.

Default configuration

These values come from the maintained default configuration. Editor drafts and exported changes can differ.

{
  "schemaVersion": 2,
  "recipeId": "watercolor",
  "durationMs": 12000,
  "delayMs": 0,
  "easing": [
    0,
    0,
    1,
    1
  ],
  "offsetX": 0,
  "offsetY": 0,
  "scale": 1,
  "loop": true,
  "interruption": "retarget",
  "tracks": [
    {
      "part": "watercolor",
      "property": "watercolorTime",
      "values": [
        0,
        12
      ],
      "times": [
        0,
        1
      ],
      "start": 0,
      "span": 1
    }
  ],
  "watercolor": {
    "color1": "#0A0A0A",
    "color2": "#E0E0E0",
    "speed": 0.6,
    "scale": 0.6,
    "warpSpeed": 0.08,
    "opacity": 1,
    "brightness": 0.15,
    "cursorInteraction": false,
    "cursorIntensity": 1
  }
}

Source code and reuse

The corresponding GitHub example contains the public renderer, default configuration and runnable entry point. Read the interaction notes and preserve the included third-party and font notices when reusing it. The complete website editor is maintained separately.

Using it in your own project

Open the editor to run the actual preview and compare changes. This document does not run a separate imitation. Recheck content, input, focus and layout after integrating an export.

Catalog provenance label: Original implementation. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.