Halftone Horizon

"use client";

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

// A horizon printed in halftone where it's dark and left smooth where it's light. Night falls from
// one edge over a bright horizon, in bands that arch like the edge of a planet (as in Horizon
// Gradient). The dark part is a screen of dots: small and dim up in the night, growing as the light
// rises until neighbours touch and fuse, leaving only small dark gaps, and then those close too and
// the dots melt into the smooth glow. So the halftone and the gradient are one ramp, with no line
// where one ends. The gaps take a darker shade of the gradient rather than black, so even the
// fused screen stays soft. A slow noise breathes through the bands, and the dots swell and shrink
// with it. The pointer acts as strongly as the night is deep: in full near the dark edge, fading
// through the bands and gone in the light. Under it the screen bulges like a loupe, magnifying the
// dots; its path leaves a trail that prints the smooth light as dots and lifts the dots it
// crosses, fading as it goes; and a click sends a ring of swollen dots out across the screen.
const SHADER = /* glsl */ `
uniform float u_curve;     // how strongly the bands arch
uniform float u_reach;     // how far the dark reaches
uniform float u_softness;  // how gradual the bands are
uniform float u_direction; // edge the dark comes from: 0 top, 1 right, 2 bottom, 3 left
uniform float u_cell;      // dot spacing, css px
uniform float u_dotSize;   // dot size, as a share of the spacing
uniform float u_minDot;    // smallest dot, as a share of the largest