Pixel Burst

"use client";

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

// Square pixels bursting out of a source cell. Next to the source they sit in a checkerboard,
// tinted by the direction they lie in (one colour to the left, another above, and so on), and they
// pale with distance until only a few loose pixels are left, fading in and out on their own. A soft
// ring pulses out from the source now and then, lighting the checkerboard as it passes, and the
// pointer leaves a short trail of lit pixels. Sources sit in the centre, on one edge or on both
// sides; with two, each pixel belongs to the nearer one.
const SHADER = /* glsl */ `
uniform float u_cell;     // cell size, css px
uniform float u_gap;      // gap between cells, css px
uniform float u_round;    // cell corner radius, css px
uniform float u_spread;   // how far the burst reaches, cells
uniform float u_core;     // radius of the solid checkerboard, cells
uniform float u_scatter;  // share of loose pixels beyond it
uniform float u_flicker;  // how often loose pixels come and go
uniform float u_pulse;    // strength of the ring that pulses out
uniform float u_hover;    // strength of the pointer trail
uniform float u_layout;   // 0 centre, 1 left, 2 right, 3 sides, 4 top, 5 bottom

const float TAU = 6.2831853;