Diagonal Beams

"use client";

import { ShaderSurface, hexToOklab, type ShaderBackgroundProps } from "../_shader-background/ShaderSurface";

// One soft light falling across a pleated surface: a row of slanted strips, side by side, like
// the folds of a fan.
//
// Each strip is a fold: its lit face starts at a crisp edge and turns away from the light toward
// the next strip, falling softly into shadow, so every fold meets the next with a sharp line. The
// light is one pool in the middle; each strip catches it a little further along or back, so the lit
// faces end at staggered points, and its brightness picks the colour: deepest shade where it is
// faint, lightest where it is strongest. Each strip twists slowly along its length, and where it
// turns edge-on less light gets through. The light's falloff and the turn into shadow are dithered,
// read from a slightly random spot for each pixel, so they dissolve into fine grain while the fold
// edges stay sharp. Just past the light only a thin highlight along each crisp edge is left, and
// it fades to nothing further out. The pointer nudges the light a little toward itself.
//
// On first showing the light opens in place, growing from a point in the middle to its full size
// and brightening as it grows.
const SHADER = /* glsl */ `
uniform float u_beams;     // strips per box height
uniform float u_size;      // size of the light
uniform float u_angle;     // direction the strips run, degrees
uniform float u_blur;      // how far the light's edge dissolves into grain