Mesh Gradient

"use client";

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

// A mesh gradient: six points of colour spread over the box, each drifting on its own slow orbit.
// Every pixel takes a weighted mix of all six, the weight falling off as a gaussian of the
// distance, so the colours meet along soft seams rather than in rings round each point. Each point
// is an ellipse that turns slowly, so the patches read as petals and folds instead of discs, and a
// faint, slow wave runs through the plane underneath so no seam stays quite straight. The mix is
// taken in OKLab with the chroma averaged on its own, so a blend between two colours never sinks
// into grey. On first showing the points bloom out from the centre.
const SHADER = /* glsl */ `
uniform float u_scale; // size of each patch of colour
uniform float u_blend; // how wide the seams between colours are
uniform float u_warp;  // how much the plane waves

const int NODES = 6;

float outCubic(float x) {
  x = 1.0 - clamp(x, 0.0, 1.0);
  return 1.0 - x * x * x;
}