Horizon Gradient

"use client";

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

// Night falling over a bright horizon: black at one edge (the top by default), deepening through
// indigo and blue to white at the other. The colour follows the distance from a point past that edge, measured on a wide
// ellipse, so every band arches like the edge of a planet: the dark dips lowest in the middle and
// the blue rises up the sides. The point drifts and a slow, broad noise breathes through the
// bands, so it moves without ever looking like it moves. On first showing the dark falls from
// its edge into place over the light, the arch easing up as it comes.
const SHADER = /* glsl */ `
uniform float u_curve;    // how strongly the bands arch
uniform float u_reach;    // how far down 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

// palette as a smooth curve through the stops (Catmull-Rom, in OKLab). Easing into each stop, as
// the shared ramp does, leaves a plateau at every colour; straight blends leave a crease instead,
// where the rate of change jumps, and the eye reads both as stripes in a gradient this large. A
// curve keeps the rate of change continuous, so the bands melt into each other. The ends repeat,
// so the curve settles gently into the darkest and lightest colours.
vec3 stop(int i) {
  return u_colors[clamp(i, 0, u_count - 1)];