Oil Slick

"use client";

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

// Light on a film of oil spreading over dark water, shot on grainy film. A field of noise is
// warped twice through itself, so it pulls into long folds and eddies, and squeezed toward the top
// of the frame as though the surface ran off to a horizon. How thick the film is there picks a
// colour from the palette as a ramp: where it thins out the water shows through black, and moving
// up in thickness the colour runs through blue and gold to orange and pink, with faint interference
// fringes rippling through the bands. Heavy grain with a little colour in it, and a few specks of
// dust and the odd scratch that flicker as a projector's would. The pointer stirs the film.
const SHADER = /* glsl */ `
uniform float u_scale;       // size of the folds
uniform float u_warp;        // how far the film folds through itself
uniform float u_perspective; // how strongly the surface runs off toward the top
uniform float u_fringes;     // strength of the interference fringes
uniform float u_water;       // how much of the water shows through
uniform float u_dust;        // dust specks and scratches
uniform float u_stir;        // how strongly the pointer stirs the film

vec3 shade(vec2 frag) {
  float t = u_time * 0.05;