Ink Plume

"use client";

import type { CSSProperties, ReactNode } from "react";
import { ShaderSurface, hexToOklab } from "../_shader-background/ShaderSurface";
import { shadesOf, type ShadeStep } from "../_shader-background/shades";

// A plume of ink rising through clear water, seen through a lens that splits its colours. The plume
// is a column whose centre line wanders with height, its width breathing, its edges roughened by
// noise and the whole thing warped through a slow flow. It is drawn three times: once in place for
// the ink, and twice nudged a little either way along a slowly turning direction, for two fringe
// colours that show only where the ink itself doesn't, the way dispersion edges a dark shape in
// colour. The higher the ink rises the more it spreads: its edges soften and the fringes widen,
// until near the top they are no more than a pale haze.
const SHADER = /* glsl */ `
uniform float u_scale;  // size of the plume
uniform float u_width;  // how broad the plume is
uniform float u_warp;   // how much the flow bends it
uniform float u_blur;   // how soft the ink is, growing with height
uniform float u_spread; // how far the fringes split from the ink
uniform float u_rotation; // turn of the whole plume, radians
uniform vec3 u_base;    // the water, OKLab

// how much ink covers a point, 0..1
float plume(vec2 p, float y, float t, float soft) {