Voronoi Cells

"use client";

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

// A field of cells, each grown from a point that wanders inside its own square, so the pattern
// shifts like a living membrane without points ever crossing. Edges are found with Inigo Quilez's
// exact border distance, so they stay one even width at any size. Each cell is a raised tile with a
// bevelled rim, lit from the upper left, sitting in a narrow groove. Now and then a wave sweeps out
// from a random spot and lights the cells it passes, whole cells at a time, as if a signal were
// hopping through a network: light leaks up through the grooves around them and pools along their
// rims. The cells under the pointer light up the same way, and a click sends a ring of its own.
const SHADER = /* glsl */ `
uniform float u_cell;   // cell size, css px
uniform float u_edge;   // groove width, css px
uniform float u_bevel;  // width of each tile's rim, css px
uniform float u_fade;   // how far the cells fade toward the edges
uniform float u_glow;   // how far lit cells glow along their edges
uniform float u_pulse;  // strength of the travelling waves
uniform float u_motion; // how far each point wanders
uniform float u_multi;  // 1 when painting with a list of colours rather than shades of one

vec2 hash22(vec2 p) {