Superellipse Text Avoidance

'use client';

import { useEffect, useRef, useState, type ReactNode } from 'react';
import { Color, Geometry, Mesh, Program, Renderer } from 'ogl';
import { cn } from '@/lib/utils';
import { useInView } from '@/hooks/use-in-view';
import { useRaf } from '@/hooks/use-raf';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
import { useResizeObserver } from '@/hooks/use-resize-observer';
import { useVisibility } from '@/hooks/use-visibility';
import { clamp, damp } from '@/lib/damp';
import { createRng, randRange, shuffle } from '@/lib/prng';
import { hasWebGL, loseContext, pixelRatio } from '@/lib/webgl';
import {
  SUPERELLIPSE_TEXT_AVOIDANCE_FRAG,
  SUPERELLIPSE_TEXT_AVOIDANCE_VERT,
} from '@/components/motion/shaders/superellipse-text-avoidance';

/* ==========================================================================
   Superellipse Text Avoidance
   --------------------------------------------------------------------------
   A particle field that flows around the headline rendered on top of it. The
   avoidance region is a 6-norm superellipse fitted to the MEASURED DOM rect of
   the text, so the hole in the field is the shape of the words and follows them
   through a reflow, a font swap or a container resize.

   Three things carry the effect.

   1. THE EXPONENT. A circle around a wide headline clears far more than the
      words occupy; an axis-aligned box creases the field along four straight
      lines at its corners. A 6-norm is square enough to match a text block and
      still differentiable everywhere.

   2. THE REMAP, NOT A CLAMP. Interior particles are not pinned onto the shell —
      that maps an area onto a curve and stacks everything into one dense line.
      Radii inside the band are compressed into it, so the interior becomes a
      rim and the field stays continuous where it meets the untouched lattice.

   3. THE RECT IS MEASURED, NEVER PASSED. A hand-tuned rect is wrong on the
      first font swap and wrong again on the first narrow viewport. The text is
      real DOM, and a ResizeObserver plus `document.fonts.ready` keeps four
      numbers in a uniform in step with it.
   ========================================================================== */

export interface SuperellipseTextAvoidanceProps {
  /** The headline. Real DOM, rendered above the field and measured for the rect. */
  children?: ReactNode;
  /** Particles per megapixel of container area. The count is derived, not fixed. */
  density?: number;
  /** Hard ceiling on the population, and the size the buffers are allocated at. */
  maxCount?: number;
  /** Particle size range in CSS pixels, biased toward the small end. */
  sizeRange?: readonly [number, number];
  /** Superellipse exponent. 2 is a circle, 6 a squircle, high values a box. */
  exponent?: number;
  /** Clear margin around the text rect, in units of the container HEIGHT. */
  margin?: number;
  /** Width of the band the interior is compressed into. The whole feel. */
  whip?: number;
  /** Pointer avoidance radius, in units of the container height. 0 disables it. */
  pointerRadius?: number;
  /** Whip band for the pointer disc. */
  pointerWhip?: number;
  /** Fraction of the pointer gap still remaining after one second. */
  smoothing?: number;
  /** Overall alpha multiplier. */
  opacity?: number;
  /** First tint. Any value ogl's Color accepts. */
  colorA?: string;
  /** Second tint; each particle mixes between the two. */
  colorB?: string;
  /** Tint for displaced particles, which is what makes the shape legible. */
  glowColor?: string;
  /** Opaque clear colour the additive field is composited onto. */
  background?: string;
  /** Seed for the scatter. Same seed, same field on every reload. */
  seed?: number | string;
  className?: string;
  /** Merged onto the text layer. */
  textClassName?: string;
}

interface Uniforms {
  /** ogl types `uniforms` as an open record; the index signature keeps it assignable. */
  [name: string]: { value: unknown };
  uResolution: { value: [number, number] };
  uPixelRatio: { value: number };
  uElapsed: { value: number };
  /** Measured text box in uv space: cx, cy, halfX, halfY — already padded. */
  uRect: { value: [number, number, number, number] };
  uRectPresence: { value: number };
  uExponent: { value: number };
  uWhip: { value: number };
  uPointer: { value: [number, number] };
  uPointerPresence: { value: number };
  uPointerRadius: { value: number };
  uPointerWhip: { value: number };
  uColorA: { value: Color };
  uColorB: { value: Color };
  uGlowColor: { value: Color };
  uOpacity: { value: number };
}

interface Stage {
  renderer: Renderer;
  geometry: Geometry;
  program: Program;
  mesh: Mesh;
  uniforms: Uniforms;
  resize: (width: number, height: number) => void;
  draw: (elapsed: number) => void;
}

// #region critical
/** Floor on the population. Below this the field reads as a few stray specks. */
const MIN_COUNT = 260;
/**
 * Width of the band interior particles are compressed into, in normalised
 * superellipse units. The catalogue's WHIP_DISC. Small values throw particles
 * out hard and stack them on the outline; large ones bend the field around from
 * a distance and the text stops looking like the cause.
 */
const WHIP_DISC = 0.3;
/** Fraction of the presence gap left after a second. ~200ms in and out. */
const PRESENCE_SMOOTHING = 0.007;
/** Size distribution exponent. Above 1 crowds the population into small sizes. */
const SIZE_BIAS = 1.7;
/** Fill scales with dpr squared, and these are soft dots with no fine detail. */
const MAX_DPR = 1.5;
/** Lattice bounds. Wider than 0..1 so drift never bares the edges. */
const HOME_MIN = -0.05;
const HOME_MAX = 1.05;
/** Jitter as a fraction of a lattice cell. Past ~0.5 cells overlap and clump. */
const CELL_JITTER = 0.42;
/** The reduced-motion still: one frame with the pointer parked off to one side. */
const STILL_ELAPSED = 4.2;
const STILL_POINTER: readonly [number, number] = [0.3, 0.34];

export function SuperellipseTextAvoidance({
  children,
  density = 900,
  maxCount = 1600,
  sizeRange = [1.4, 4.4],
  exponent = 6,
  margin = 0.06,
  whip = WHIP_DISC,
  pointerRadius = 0.16,
  pointerWhip = 0.45,
  smoothing = 0.0008,
  opacity = 0.92,
  colorA = '#9ec6ff',
  colorB = '#eef2fb',
  glowColor = '#ffd9a0',
  background = '#07080d',
  seed = 'superellipse-text-avoidance',
  className,
  textClassName,
}: SuperellipseTextAvoidanceProps) {
  const host = useRef<HTMLDivElement>(null);
  const text = useRef<HTMLDivElement>(null);
  const stage = useRef<Stage | null>(null);
  const [unsupported, setUnsupported] = useState(false);

  const { width, height } = useResizeObserver(host);
  const textSize = useResizeObserver(text);
  const size = useRef({ width, height });
  size.current = { width, height };

  const reduced = useReducedMotion();
  const reducedRef = useRef(reduced);
  reducedRef.current = reduced;
  const visible = useVisibility();
  const { inView } = useInView(host, { rootMargin: '10%' });
  const ready = width > 1 && height > 1;

  const [minSize = 1.4, maxSize = 4.4] = sizeRange;

  /* Raw pointer target in field space, or null until a real move — which is not
     the same as a pointer resting at the bottom-left corner. */
  const target = useRef<{ x: number; y: number } | null>(null);
  const inside = useRef(false);
  const follow = useRef({ x: 0.5, y: 0.5 });
  const presence = useRef(0);

  /* Live numbers the loop reads. Changing one must not rebuild the renderer:
     Chromium drops the OLDEST WebGL context past roughly 16 per process, so a
     rebuild per prop change can blank an unrelated canvas on the same page. */
  const live = useRef({ exponent, margin, whip, pointerRadius, pointerWhip, smoothing, opacity });
  live.current = { exponent, margin, whip, pointerRadius, pointerWhip, smoothing, opacity };

  /**
   * Reads the text box out of the DOM and writes it into `uRect` as uv centre
   * plus padded half-extents. No React state: a measurement that re-renders is
   * a measurement that can re-measure itself in a loop.
   */
  const measure = () => {
    const s = stage.current;
    const hostEl = host.current;
    const textEl = text.current;
    if (!s || !hostEl || !textEl) return;

    const hostBox = hostEl.getBoundingClientRect();
    if (hostBox.width < 1 || hostBox.height < 1) return;
    const textBox = textEl.getBoundingClientRect();

    if (textBox.width < 1 || textBox.height < 1) {
      // No children, or the text has not laid out yet. Presence 0 rather than a
      // zero-size rect, which would be a singularity at the centre of the field.
      s.uniforms.uRectPresence.value = 0;
      return;
    }

    const aspect = hostBox.width / hostBox.height;
    /* The margin is specified in HEIGHT units and divided by the aspect ratio
       for x, so the clear ring is the same number of pixels on all four sides.
       Adding the same uv figure to both halves pads a wide container far more
       at the ends of the line than above and below it. */
    const padX = live.current.margin / Math.max(aspect, 0.0001);
    const padY = live.current.margin;

    s.uniforms.uRect.value[0] = (textBox.left - hostBox.left + textBox.width * 0.5) / hostBox.width;
    // Flipped: field y is up, client y is down.
    s.uniforms.uRect.value[1] =
      1 - (textBox.top - hostBox.top + textBox.height * 0.5) / hostBox.height;
    s.uniforms.uRect.value[2] = textBox.width * 0.5 / hostBox.width + padX;
    s.uniforms.uRect.value[3] = textBox.height * 0.5 / hostBox.height + padY;
    s.uniforms.uRectPresence.value = 1;

    // The live loop picks this up next frame; a paused one has to be told.
    if (reducedRef.current) s.draw(STILL_ELAPSED);
  };

  useEffect(() => {
    const el = host.current;
    if (!el || !ready) return;

    if (!hasWebGL()) {
      setUnsupported(true);
      return;
    }

    /* ogl creates its own canvas, and it is appended and removed per effect
       run. Reusing one React-owned canvas breaks under StrictMode: the first
       cleanup force-loses the context, and `getContext` on that element
       afterwards hands back the dead one rather than a fresh context — the
       panel is then permanently blank in development and fine in production. */
    const renderer = new Renderer({
      dpr: pixelRatio(MAX_DPR),
      // Opaque: the pass is additive, and additive onto a transparent canvas
      // would have to brighten the page behind it, which the GPU cannot see.
      alpha: false,
      // Nothing occludes anything, so a depth buffer is memory plus a clear.
      depth: false,
      antialias: false,
      powerPreference: 'low-power',
    });

    const gl = renderer.gl;
    const canvas = gl.canvas;

    const bg = new Color(background);
    gl.clearColor(bg.r, bg.g, bg.b, 1);

    const quad = new Float32Array([-0.5, -0.5, 0.5, -0.5, 0.5, 0.5, -0.5, 0.5]);
    const index = new Uint16Array([0, 1, 2, 0, 2, 3]);

    const total = Math.max(MIN_COUNT, Math.round(maxCount));
    const homes = new Float32Array(total * 2);
    const params = new Float32Array(total * 4);
    const seeds = new Float32Array(total * 4);

    const rng = createRng(seed);

    /* A STRATIFIED scatter, not `rng()` twice. Uniform random has clumps and
       voids at this population, and once the avoidance opens a real hole those
       accidental voids read as more holes — the shape of the field stops being
       legible. A jittered lattice is even everywhere and still looks organic.
       Cells are then SHUFFLED, because the instanced count is a prefix of these
       buffers: in lattice order a smaller count would draw the top rows only. */
    const aspect = Math.max(size.current.width, 1) / Math.max(size.current.height, 1);
    const cols = Math.max(2, Math.round(Math.sqrt(total * aspect)));
    const rows = Math.max(2, Math.ceil(total / cols));
    const cells: Array<[number, number]> = [];
    for (let r = 0; r < rows; r += 1) {
      for (let c = 0; c < cols; c += 1) {
        cells.push([(c + 0.5) / cols, (r + 0.5) / rows]);
      }
    }
    shuffle(rng, cells);

    const spanX = HOME_MAX - HOME_MIN;
    const spanY = HOME_MAX - HOME_MIN;

    for (let i = 0; i < total; i += 1) {
      const cell = cells[i % cells.length] ?? [0.5, 0.5];
      const [cellX = 0.5, cellY = 0.5] = cell;
      homes[i * 2] = HOME_MIN + (cellX + randRange(rng, -CELL_JITTER, CELL_JITTER) / cols) * spanX;
      homes[i * 2 + 1] =
        HOME_MIN + (cellY + randRange(rng, -CELL_JITTER, CELL_JITTER) / rows) * spanY;

      // Biased small: a linear distribution puts a quarter of the population in
      // the largest quarter of the range and the field reads as gravel.
      const sizeT = Math.pow(rng(), SIZE_BIAS);
      params[i * 4] = Math.max(0.5, minSize) + Math.max(maxSize - minSize, 0.25) * sizeT;
      // Drift radius and rate. Small, because this field is a texture the text
      // sits in — a fast one competes with the headline for attention.
      params[i * 4 + 1] = randRange(rng, 0.002, 0.014);
      params[i * 4 + 2] = (rng() < 0.5 ? -1 : 1) * randRange(rng, 0.08, 0.32);
      // Bigger particles are dimmer, so total light stays roughly constant.
      params[i * 4 + 3] = 0.32 + 0.5 * (1 - sizeT);

      seeds[i * 4] = rng() * Math.PI * 2;
      seeds[i * 4 + 1] = randRange(rng, 0.3, 1);
      seeds[i * 4 + 2] = rng();
      seeds[i * 4 + 3] = 0;
    }

    const geometry = new Geometry(gl, {
      index: { data: index },
      position: { size: 2, data: quad },
      aHome: { size: 2, data: homes, instanced: 1 },
      aParams: { size: 4, data: params, instanced: 1 },
      aSeed: { size: 4, data: seeds, instanced: 1 },
    });

    const uniforms: Uniforms = {
      uResolution: { value: [1, 1] },
      uPixelRatio: { value: renderer.dpr },
      uElapsed: { value: 0 },
      uRect: { value: [0.5, 0.5, 0.001, 0.001] },
      uRectPresence: { value: 0 },
      uExponent: { value: clamp(exponent, 2, 16) },
      uWhip: { value: Math.max(whip, 0.02) },
      uPointer: { value: [0.5, 0.5] },
      uPointerPresence: { value: 0 },
      uPointerRadius: { value: Math.max(pointerRadius, 0) },
      uPointerWhip: { value: Math.max(pointerWhip, 0.02) },
      uColorA: { value: new Color(colorA) },
      uColorB: { value: new Color(colorB) },
      uGlowColor: { value: new Color(glowColor) },
      uOpacity: { value: opacity },
    };

    const program = new Program(gl, {
      vertex: SUPERELLIPSE_TEXT_AVOIDANCE_VERT,
      fragment: SUPERELLIPSE_TEXT_AVOIDANCE_FRAG,
      uniforms,
      transparent: true,
      depthTest: false,
      depthWrite: false,
      // ogl culls BACK faces by default and the quad's winding is not
      // guaranteed to face the way the driver expects. A culled particle is not
      // dim — it is absent.
      cullFace: false,
    });
    // Additive, overriding the source-over that `transparent: true` selected.
    // Order independent, so a thousand overlapping instances need no sort.
    program.setBlendFunc(gl.ONE, gl.ONE);

    const mesh = new Mesh(gl, { geometry, program });

    el.insertBefore(canvas, el.firstChild);
    canvas.style.display = 'block';

    /* Listeners on the CANVAS, not the window. A document-level handler
       outlives the renderer it was written for, and the rect it measures is not
       the rect being drawn into — after a scroll the hole sits at an offset
       from the cursor. Passive, because nothing here calls preventDefault and a
       non-passive move handler makes the compositor wait for JS on every event. */
    const onMove = (event: PointerEvent) => {
      const rect = canvas.getBoundingClientRect();
      if (rect.width === 0 || rect.height === 0) return;
      target.current = {
        x: (event.clientX - rect.left) / rect.width,
        y: 1 - (event.clientY - rect.top) / rect.height,
      };
      inside.current = true;
    };
    const onLeave = () => {
      // Position is left where it is. Tweening it back to the centre drags a
      // visible furrow across the field on the way out.
      inside.current = false;
    };

    canvas.addEventListener('pointermove', onMove, { passive: true });
    canvas.addEventListener('pointerleave', onLeave, { passive: true });
    canvas.addEventListener('pointercancel', onLeave, { passive: true });

    const resize = (w: number, h: number) => {
      renderer.setSize(w, h);
      // `setSize` writes literal px into the canvas's inline style, which wins
      // over any class. Re-asserting percentages keeps it fluid between resize
      // notifications.
      canvas.style.width = '100%';
      canvas.style.height = '100%';

      uniforms.uResolution.value = [gl.drawingBufferWidth, gl.drawingBufferHeight];
      uniforms.uPixelRatio.value = renderer.dpr;

      // Population from area, not a fixed number: the same density reads right
      // in a 320px card and a 2000px hero. The buffers already hold `total`
      // particles in shuffled order, so a prefix of them is still spatially
      // even — no rebuild, no reallocation, no new GPU memory.
      const megapixels = (w * h) / 1_000_000;
      const count = clamp(Math.round(megapixels * density), MIN_COUNT, total);
      geometry.setInstancedCount(count);
    };

    const draw = (elapsed: number) => {
      uniforms.uElapsed.value = elapsed;
      renderer.render({ scene: mesh });
    };

    resize(size.current.width, size.current.height);
    stage.current = { renderer, geometry, program, mesh, uniforms, resize, draw };
    measure();
    draw(0);

    /* A webfont swap changes the text box after the first measurement, and
       nothing about a font swap resizes the element's border box on every
       engine — so the ResizeObserver alone is not enough. */
    let cancelled = false;
    if (typeof document !== 'undefined' && 'fonts' in document) {
      void document.fonts.ready.then(() => {
        if (!cancelled) measure();
      });
    }

    return () => {
      cancelled = true;
      stage.current = null;
      canvas.removeEventListener('pointermove', onMove);
      canvas.removeEventListener('pointerleave', onLeave);
      canvas.removeEventListener('pointercancel', onLeave);
      // ogl has no `dispose()`: `remove()` on the geometry deletes its VAOs and
      // every buffer, `remove()` on the program deletes the shaders and the
      // program, and only then is the context worth handing back. Dropping the
      // context is the part that matters — the per-process budget is about
      // sixteen, and exceeding it kills someone else's oldest context.
      geometry.remove();
      program.remove();
      loseContext(gl);
      canvas.width = 0;
      canvas.height = 0;
      canvas.remove();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ready, density, maxCount, minSize, maxSize, seed]);

  // Colours go into the live uniforms rather than being effect deps, so
  // recolouring never costs a context.
  useEffect(() => {
    const s = stage.current;
    if (!s) return;
    s.uniforms.uColorA.value.set(colorA);
    s.uniforms.uColorB.value.set(colorB);
    s.uniforms.uGlowColor.value.set(glowColor);
    const bg = new Color(background);
    s.renderer.gl.clearColor(bg.r, bg.g, bg.b, 1);
  }, [colorA, colorB, glowColor, background]);

  // Resize is its own effect: a reflow costs a `setSize`, an instanced-count
  // change and a re-measure, never a buffer rebuild.
  useEffect(() => {
    stage.current?.resize(width, height);
    measure();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [width, height]);

  // The text box changes on its own too — wrapping to a new line, a font swap,
  // or different children entirely.
  useEffect(() => {
    measure();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [textSize.width, textSize.height, margin, children]);

  useRaf(
    (dt, elapsed) => {
      const s = stage.current;
      if (!s) return;
      const cfg = live.current;

      const aim = target.current;
      if (aim) {
        follow.current.x = damp(follow.current.x, aim.x, cfg.smoothing, dt);
        follow.current.y = damp(follow.current.y, aim.y, cfg.smoothing, dt);
      }
      presence.current = damp(
        presence.current,
        inside.current && aim !== null ? 1 : 0,
        PRESENCE_SMOOTHING,
        dt,
      );

      const u = s.uniforms;
      // Mutated in place. Assigning a fresh tuple allocates an array a frame and
      // defeats ogl's redundant-uniform cache, which compares by length first
      // and then element by element against the array it kept.
      u.uPointer.value[0] = follow.current.x;
      u.uPointer.value[1] = follow.current.y;
      u.uPointerPresence.value = presence.current;
      u.uPointerRadius.value = Math.max(cfg.pointerRadius, 0);
      u.uPointerWhip.value = Math.max(cfg.pointerWhip, 0.02);
      u.uExponent.value = clamp(cfg.exponent, 2, 16);
      u.uWhip.value = Math.max(cfg.whip, 0.02);
      u.uOpacity.value = cfg.opacity;

      s.draw(elapsed);
    },
    ready && inView && visible && !reduced && !unsupported,
  );

  /* Reduced motion is a composed still, not an empty box: one frame with the
     text rect fully avoided and the pointer parked off to one side, so the
     shape of the field is exactly what a moving version would show. The
     listeners stay attached and their target is never consumed. */
  useEffect(() => {
    const s = stage.current;
    if (!s || !reduced || !ready) return;
    const [px = 0.3, py = 0.34] = STILL_POINTER;
    s.uniforms.uPointer.value[0] = px;
    s.uniforms.uPointer.value[1] = py;
    s.uniforms.uPointerPresence.value = 1;
    s.draw(STILL_ELAPSED);
  }, [reduced, ready, width, height]);
  // #endregion critical

  return (
    <div ref={host} className={cn('relative h-full w-full overflow-hidden bg-bg', className)}>
      {unsupported ? (
        <div
          aria-hidden
          className="absolute inset-0"
          style={{
            backgroundImage:
              'radial-gradient(circle at 50% 50%, var(--k-line-strong) 1px, transparent 0)',
            backgroundSize: '30px 30px',
          }}
        />
      ) : null}

      {/* Pointer-transparent, so the pointer listeners on the canvas underneath
          still see moves across the headline. Anything interactive belongs
          outside this layer. */}
      <div className="pointer-events-none absolute inset-0 flex items-center justify-center p-8">
        <div ref={text} className={cn('max-w-[22ch] text-center', textClassName)}>
          {children}
        </div>
      </div>
    </div>
  );
}

/* ==========================================================================
   Superellipse Text Avoidance — GLSL
   --------------------------------------------------------------------------
   A lattice of instanced quads that flows AROUND the headline instead of
   through it. The avoidance region is a 6-norm superellipse — a squircle —
   fitted to the measured DOM rect of the text.

   Why a 6-norm. A circle around a wide headline clears far more space than the
   words occupy and leaves an obvious empty halo at the ends of the line. An
   axis-aligned box clears the right area but its corners are a discontinuity in
   the field: particles turn a sharp corner and the lattice creases along four
   straight lines. Raising the exponent past 2 squares the shape up while
   keeping the corners differentiable, and 6 is close enough to a text block
   that nothing reads as either halo or crease.

   The remap. Everything inside the shell is not clamped ONTO it — that maps a
   whole area onto a curve and piles every interior particle into one infinitely
   dense line. It is remapped: radii in [0, 1 + whip] are compressed linearly
   into [1, 1 + whip], so the interior turns into a band hugging the shape and
   the field is continuous where it meets the undisturbed lattice outside.
   WHIP_DISC is that band's width, and it is the whole feel of the effect: small
   values whip particles out hard and stack them on the outline, large values
   let the lattice bend around at a distance.

   The same function runs twice per particle — once for the text rect at
   exponent 6, once for the pointer at exponent 2 — because a disc is just a
   superellipse with a lower exponent.

   GLSL ES 1.00, so the same source compiles under a WebGL1 context.
   ========================================================================== */

/**
 * position — the shared unit quad, -0.5..0.5 on both axes.
 * aHome    — lattice rest position in uv space, 0..1 across the container.
 * aParams  — x: size in CSS px, y: drift radius in uv, z: drift rate in rad/s,
 *   w: base alpha.
 * aSeed    — x: drift phase, y: edge softness, z: tint mix, w: unused spare.
 */
export const SUPERELLIPSE_TEXT_AVOIDANCE_VERT = /* glsl */ `
attribute vec2 position;
attribute vec2 aHome;
attribute vec4 aParams;
attribute vec4 aSeed;

uniform vec2  uResolution;
uniform float uPixelRatio;
uniform float uElapsed;
/** Measured text box in uv space: xy centre, zw half-extents, already padded. */
uniform vec4  uRect;
uniform float uRectPresence;
uniform float uExponent;
uniform float uWhip;
uniform vec2  uPointer;
uniform float uPointerPresence;
uniform float uPointerRadius;
uniform float uPointerWhip;

varying vec2  vQuad;
varying float vAlpha;
varying float vSoftness;
varying float vTint;
varying float vPush;

/**
 * The p-norm of n. abs() first, and an epsilon, because pow() is undefined for
 * a negative base and for 0 raised to a non-positive power — and a lattice has
 * particles sitting exactly on both axes, so both cases are reached on the
 * first frame rather than never.
 */
float snorm(vec2 n, float e) {
  vec2 a = abs(n) + 1e-5;
  return pow(pow(a.x, e) + pow(a.y, e), 1.0 / e);
}

/**
 * Displacement that lifts p out of the superellipse centred on rectCenter with
 * half-extents rectHalf. amount comes back as how much of the lift applied, for
 * the brightness ramp.
 */
vec2 avoid(vec2 p, vec2 center, vec2 rectHalf, float e, float whip, out float amount) {
  vec2 safeHalf = max(rectHalf, vec2(1e-4));
  vec2 n = (p - center) / safeHalf;
  float r = snorm(n, e);

  /* The remap, branchless. Inside the band, r is compressed into
     [1, 1 + whip]; outside it, mapped == r exactly, so the lattice beyond the
     band is untouched and there is no seam where the influence ends. */
  float span = 1.0 + whip;
  float inner = 1.0 + whip * min(r, span) / span;
  float mapped = inner + max(r - span, 0.0);

  amount = clamp(mapped - r, 0.0, 1.0);

  /* Divide by a floor rather than normalize(): a particle at the exact centre
     has no direction, and normalize() there returns NaN, which propagates into
     gl_Position and drops the entire instance rather than one component. */
  vec2 dir = n / max(r, 1e-3);
  return safeHalf * dir * (mapped - r);
}

void main() {
  float aspect = uResolution.x / max(uResolution.y, 1.0);

  /* Idle drift, so the lattice is alive before anything is avoided. Each
     particle traces its own small ellipse on its own phase; a shared phase
     turns the whole grid into one visible pulse. */
  float phase = aSeed.x;
  vec2 drift = vec2(
    sin(uElapsed * aParams.z + phase),
    cos(uElapsed * aParams.z * 0.83 + phase * 1.7)
  ) * aParams.y;
  vec2 p = aHome + drift;

  /* 1. THE TEXT RECT, at exponent 6. Deliberately NOT aspect-corrected: the
     rect was measured from the DOM in element space, so the avoidance field has
     to live in the same space or it stops agreeing with the letters — on a wide
     container a "corrected" rect clears a region visibly narrower than the
     headline it is supposed to be protecting. */
  float textAmount = 0.0;
  p += avoid(p, uRect.xy, uRect.zw, uExponent, uWhip, textAmount) * uRectPresence;
  textAmount *= uRectPresence;

  /* 2. THE POINTER, at exponent 2, which is a plain disc. This one IS
     aspect-corrected — x scaled by the aspect ratio — because it is a shape in
     screen space rather than a measured box, and an uncorrected disc is a
     visible ellipse on anything but a square container. */
  vec2 pointerHalf = vec2(uPointerRadius / max(aspect, 1e-4), uPointerRadius);
  float pointerAmount = 0.0;
  p += avoid(p, uPointer, pointerHalf, 2.0, uPointerWhip, pointerAmount) * uPointerPresence;
  pointerAmount *= uPointerPresence;

  float push = clamp(max(textAmount, pointerAmount) * 3.0, 0.0, 1.0);
  vPush = push;

  /* The quad is expanded in PIXELS and only then converted to clip space, so a
     particle stays square in a container of any aspect ratio. */
  float size = aParams.x * uPixelRatio * (1.0 + push * 0.5);
  vec2 clip = p * 2.0 - 1.0;
  vec2 offset = position * size / max(uResolution, vec2(1.0)) * 2.0;

  vQuad = position;
  vSoftness = aSeed.y;
  vTint = aSeed.z;
  /* Displaced particles brighten. Without it the lattice around the headline is
     just a hole; with it the shape of the field is legible as a rim, which is
     the only visual evidence that the avoidance is a squircle and not a box. */
  vAlpha = aParams.w * (0.55 + 0.45 * push);

  gl_Position = vec4(clip + offset, 0.0, 1.0);
}
`;

export const SUPERELLIPSE_TEXT_AVOIDANCE_FRAG = /* glsl */ `
precision mediump float;

uniform vec3  uColorA;
uniform vec3  uColorB;
uniform vec3  uGlowColor;
uniform float uOpacity;

varying vec2  vQuad;
varying float vAlpha;
varying float vSoftness;
varying float vTint;
varying float vPush;

void main() {
  /* A disc with a variable core: the flat centre shrinks as softness rises, so
     one material covers hard specks and soft motes. A fixed core with a
     variable edge cannot reach the soft end — the particle keeps a hard middle
     however far the edge is pushed out. */
  float d = length(vQuad);
  float core = mix(0.3, 0.02, clamp(vSoftness, 0.0, 1.0));
  float falloff = 1.0 - smoothstep(core, 0.5, d);
  if (falloff <= 0.0) discard;

  vec3 col = mix(uColorA, uColorB, clamp(vTint, 0.0, 1.0));
  col = mix(col, uGlowColor, vPush * 0.85);

  /* Squared, because additive blending sums overlapping quads and a linear
     falloff piles into visible bright polygons wherever several cross. */
  float alpha = falloff * falloff * vAlpha * uOpacity;

  /* Premultiplied for an additive pass: the destination is only ever added to,
     so the colour has to arrive already scaled by its own coverage. */
  gl_FragColor = vec4(col * alpha, alpha);
}
`;

/* ==========================================================================
   Frame-rate-independent interpolation.
   --------------------------------------------------------------------------
   The everywhere-idiom `x += (target - x) * 0.1` is a bug: it converges twice
   as fast on a 120 Hz display as on a 60 Hz one, so the same code feels
   different on different hardware and visibly speeds up when the browser
   drops frames. `damp` fixes it by raising the retention factor to the power
   of elapsed time, which is the exact continuous form of the same curve.
   ========================================================================== */

/**
 * Fraction of the remaining distance to close this frame.
 *
 * @param smoothing Fraction of the gap that REMAINS after one second.
 *   Smaller is snappier. 0.001 ≈ very fast, 0.01 ≈ fast, 0.1 ≈ soft,
 *   0.5 ≈ slow drift.
 * @param dt Seconds elapsed since the previous frame.
 */
export function dampFactor(smoothing: number, dt: number): number {
  return 1 - Math.pow(smoothing, dt);
}

/** Move `current` toward `target` at a rate independent of frame rate. */
export function damp(
  current: number,
  target: number,
  smoothing: number,
  dt: number,
): number {
  return current + (target - current) * dampFactor(smoothing, dt);
}

/**
 * The per-frame lerp constant an author measured at 60fps, converted into the
 * `smoothing` argument `damp` wants. Lets a source that says "0.1 per frame"
 * be ported without re-tuning by eye:
 *
 *   damp(x, t, perFrameToSmoothing(0.1), dt)
 */
export function perFrameToSmoothing(alpha: number, baseFps = 60): number {
  return Math.pow(1 - alpha, baseFps);
}

export function lerp(a: number, b: number, t: number): number {
  return a + (b - a) * t;
}

export function clamp(v: number, min: number, max: number): number {
  return v < min ? min : v > max ? max : v;
}

export function inverseLerp(a: number, b: number, v: number): number {
  return a === b ? 0 : (v - a) / (b - a);
}

export function mapRange(
  v: number,
  inMin: number,
  inMax: number,
  outMin: number,
  outMax: number,
  doClamp = true,
): number {
  const t = inverseLerp(inMin, inMax, v);
  const r = lerp(outMin, outMax, doClamp ? clamp(t, 0, 1) : t);
  return r;
}

/** GLSL `smoothstep`, same semantics, for parity between JS and shader code. */
export function smoothstep(edge0: number, edge1: number, x: number): number {
  const t = clamp(inverseLerp(edge0, edge1, x), 0, 1);
  return t * t * (3 - 2 * t);
}

/**
 * Gaussian falloff, `exp(-d²)`. Yields 1.000 / 0.368 / 0.018 / 0.0001 at
 * distances 0 / 1 / 2 / 3 — a continuous focus scalar with no thresholds and
 * no branches, which is why carousels that use it feel analogue rather than
 * stepped.
 */
export function gaussian(distance: number, falloff = 1): number {
  const d = distance * falloff;
  return Math.exp(-(d * d));
}

/* ==========================================================================
   Seeded randomness.
   --------------------------------------------------------------------------
   `Math.random()` in a particle field means the server and the client
   disagree, which React reports as a hydration mismatch, and it means the
   layout is different on every reload so a visual regression is invisible.
   Every component that scatters something uses a seeded generator instead.
   ========================================================================== */

export type Rng = () => number;

/**
 * mulberry32 — 32-bit, fast, and good enough for visual scatter. Returns a
 * function yielding floats in [0, 1).
 */
export function mulberry32(seed: number): Rng {
  let a = seed >>> 0;
  return function next() {
    a = (a + 0x6d2b79f5) >>> 0;
    let t = a;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

/** Turn any string into a 32-bit seed, so `seed="hero"` is reproducible. */
export function hashSeed(input: string): number {
  let h = 2166136261 >>> 0;
  for (let i = 0; i < input.length; i++) {
    h ^= input.charCodeAt(i);
    h = Math.imul(h, 16777619);
  }
  return h >>> 0;
}

export function createRng(seed: number | string): Rng {
  return mulberry32(typeof seed === 'string' ? hashSeed(seed) : seed);
}

export function randRange(rng: Rng, min: number, max: number): number {
  return min + rng() * (max - min);
}

export function randInt(rng: Rng, min: number, maxExclusive: number): number {
  return Math.floor(randRange(rng, min, maxExclusive));
}

/**
 * Uniform point on a unit sphere. Naive angle-pairing clusters at the poles;
 * this inverts the cosine so density is even.
 */
export function randOnSphere(rng: Rng): [number, number, number] {
  const u = rng() * 2 - 1;
  const theta = rng() * Math.PI * 2;
  const r = Math.sqrt(1 - u * u);
  return [r * Math.cos(theta), r * Math.sin(theta), u];
}

/** Uniform point in a unit disc — `sqrt` prevents crowding at the centre. */
export function randInDisc(rng: Rng): [number, number] {
  const r = Math.sqrt(rng());
  const theta = rng() * Math.PI * 2;
  return [r * Math.cos(theta), r * Math.sin(theta)];
}

/** In-place Fisher-Yates using the supplied generator. */
export function shuffle<T>(rng: Rng, arr: T[]): T[] {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = randInt(rng, 0, i + 1);
    const a = arr[i] as T;
    const b = arr[j] as T;
    arr[i] = b;
    arr[j] = a;
  }
  return arr;
}

'use client';

import { useEffect, useRef, useState, type RefObject } from 'react';

/* ==========================================================================
   IntersectionObserver, sharing one observer per option set.
   --------------------------------------------------------------------------
   A hundred cards each constructing their own observer is a hundred observers
   the compositor has to service. Keying a shared observer by its options
   collapses that to one per distinct configuration — in practice, two or
   three for the whole site.
   ========================================================================== */

export interface InViewState {
  inView: boolean;
  /** 0-1. The preview slot allocator ranks candidates by this. */
  ratio: number;
}

export interface UseInViewOptions {
  root?: Element | null;
  rootMargin?: string;
  /** Single number or list, same meaning as the native option. */
  threshold?: number | number[];
  /** Stop observing after the first time it becomes visible. */
  once?: boolean;
}

type Entry = {
  observer: IntersectionObserver;
  handlers: Map<Element, (e: IntersectionObserverEntry) => void>;
};

const pools = new Map<string, Entry>();

function poolFor(options: UseInViewOptions): Entry {
  const key = JSON.stringify({
    rootMargin: options.rootMargin ?? '0px',
    threshold: options.threshold ?? 0,
  });
  const existing = pools.get(key);
  if (existing) return existing;

  const handlers = new Map<Element, (e: IntersectionObserverEntry) => void>();
  const observer = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) handlers.get(entry.target)?.(entry);
    },
    {
      root: options.root ?? null,
      rootMargin: options.rootMargin ?? '0px',
      threshold: options.threshold ?? 0,
    },
  );
  const created: Entry = { observer, handlers };
  pools.set(key, created);
  return created;
}

export function useInView(
  ref: RefObject<Element | null>,
  options: UseInViewOptions = {},
): InViewState {
  const [state, setState] = useState<InViewState>({ inView: false, ratio: 0 });
  const { root = null, rootMargin = '0px', once = false } = options;
  const thresholdKey = JSON.stringify(options.threshold ?? 0);
  const done = useRef(false);

  useEffect(() => {
    const el = ref.current;
    if (!el || typeof IntersectionObserver === 'undefined') return;
    if (once && done.current) return;

    const pool = poolFor({
      root,
      rootMargin,
      threshold: JSON.parse(thresholdKey) as number | number[],
    });

    const handle = (entry: IntersectionObserverEntry) => {
      setState({ inView: entry.isIntersecting, ratio: entry.intersectionRatio });
      if (once && entry.isIntersecting) {
        done.current = true;
        pool.handlers.delete(el);
        pool.observer.unobserve(el);
      }
    };

    pool.handlers.set(el, handle);
    pool.observer.observe(el);

    return () => {
      pool.handlers.delete(el);
      pool.observer.unobserve(el);
    };
  }, [ref, root, rootMargin, thresholdKey, once]);

  return state;
}

'use client';

import { useEffect, useRef } from 'react';

/* ==========================================================================
   One shared requestAnimationFrame loop.
   --------------------------------------------------------------------------
   Forty components each calling requestAnimationFrame means forty callbacks
   the browser schedules separately and forty chances to read layout after a
   write. One loop, one ordered pass, one place to clamp delta time.

   Delta is clamped to 100 ms. Without that, returning to a backgrounded tab
   delivers a multi-second dt and every physics integration in the page
   explodes on the first frame back.
   ========================================================================== */

export type RafCallback = (dt: number, elapsed: number) => void;

const callbacks = new Set<RafCallback>();
let frame = 0;
let last = 0;
let start = 0;

const MAX_DT = 0.1;
const DEFAULT_DT = 1 / 60;

function tick(now: number) {
  frame = requestAnimationFrame(tick);
  const dt = last === 0 ? DEFAULT_DT : Math.min((now - last) / 1000, MAX_DT);
  last = now;
  const elapsed = (now - start) / 1000;
  // Copy: a callback may unsubscribe itself (or another) mid-iteration.
  for (const cb of Array.from(callbacks)) {
    if (callbacks.has(cb)) cb(dt, elapsed);
  }
}

function subscribe(cb: RafCallback) {
  callbacks.add(cb);
  if (frame === 0) {
    start = performance.now();
    last = 0;
    frame = requestAnimationFrame(tick);
  }
  return () => {
    callbacks.delete(cb);
    if (callbacks.size === 0 && frame !== 0) {
      cancelAnimationFrame(frame);
      frame = 0;
      last = 0;
    }
  };
}

/**
 * Run `cb` every frame while `enabled`.
 *
 * The callback is held in a ref, so it does not need to be memoised and the
 * subscription is never torn down just because the closure changed identity.
 */
export function useRaf(cb: RafCallback, enabled = true): void {
  const ref = useRef(cb);
  ref.current = cb;

  useEffect(() => {
    if (!enabled) return;
    return subscribe((dt, elapsed) => ref.current(dt, elapsed));
  }, [enabled]);
}

'use client';

import { useSyncExternalStore } from 'react';

/* ==========================================================================
   prefers-reduced-motion, SSR-safe.
   --------------------------------------------------------------------------
   useSyncExternalStore rather than useState + useEffect: the server snapshot
   is an explicit `false`, so the markup React renders on the server and the
   markup it hydrates with agree, and the real value lands in the same commit
   as hydration instead of one frame later. A useEffect version flashes the
   animated variant before removing it — the exact thing the user asked not to
   see.

   Reduced motion is not "duration: 0". For most components here it means a
   different render: the final state, a static poster, or a paused frame.
   ========================================================================== */

const QUERY = '(prefers-reduced-motion: reduce)';

function subscribe(onChange: () => void) {
  if (typeof window === 'undefined' || !window.matchMedia) return () => {};
  const mql = window.matchMedia(QUERY);
  mql.addEventListener('change', onChange);
  return () => mql.removeEventListener('change', onChange);
}

function getSnapshot() {
  if (typeof window === 'undefined' || !window.matchMedia) return false;
  return window.matchMedia(QUERY).matches;
}

function getServerSnapshot() {
  return false;
}

export function useReducedMotion(): boolean {
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}

/** Generic media-query hook, same SSR guarantees. */
export function useMediaQuery(query: string): boolean {
  return useSyncExternalStore(
    (onChange) => {
      if (typeof window === 'undefined' || !window.matchMedia) return () => {};
      const mql = window.matchMedia(query);
      mql.addEventListener('change', onChange);
      return () => mql.removeEventListener('change', onChange);
    },
    () => {
      if (typeof window === 'undefined' || !window.matchMedia) return false;
      return window.matchMedia(query).matches;
    },
    () => false,
  );
}

'use client';

import { useEffect, useState, type RefObject } from 'react';

/* ==========================================================================
   Element size, from one shared ResizeObserver.
   --------------------------------------------------------------------------
   Sized from the element rather than the window because a preview in a grid
   cell resizes when the grid reflows, not when the viewport does. Reading
   `window.innerWidth` is the reason so many canvas components are correct on
   load and wrong after a sidebar opens.
   ========================================================================== */

export interface Size {
  width: number;
  height: number;
}

type Handler = (size: Size) => void;

let observer: ResizeObserver | null = null;
const handlers = new Map<Element, Handler>();

function ensureObserver(): ResizeObserver | null {
  if (typeof ResizeObserver === 'undefined') return null;
  observer ??= new ResizeObserver((entries) => {
    for (const entry of entries) {
      const box = entry.contentBoxSize?.[0];
      const size: Size = box
        ? { width: box.inlineSize, height: box.blockSize }
        : { width: entry.contentRect.width, height: entry.contentRect.height };
      handlers.get(entry.target)?.(size);
    }
  });
  return observer;
}

export function useResizeObserver(ref: RefObject<Element | null>): Size {
  const [size, setSize] = useState<Size>({ width: 0, height: 0 });

  useEffect(() => {
    const el = ref.current;
    const ro = ensureObserver();
    if (!el || !ro) return;

    // Seed synchronously: waiting for the first observer callback leaves one
    // frame where a canvas is sized 0x0, which some drivers log as an error.
    const rect = el.getBoundingClientRect();
    setSize({ width: rect.width, height: rect.height });

    handlers.set(el, (next) =>
      setSize((prev) =>
        prev.width === next.width && prev.height === next.height ? prev : next,
      ),
    );
    ro.observe(el);

    return () => {
      handlers.delete(el);
      ro.unobserve(el);
    };
  }, [ref]);

  return size;
}

'use client';

import { useSyncExternalStore } from 'react';

/* ==========================================================================
   Document visibility, shared.
   --------------------------------------------------------------------------
   A backgrounded tab still runs `setInterval`, still holds WebGL contexts,
   and — on some platforms — still gets throttled rAF ticks with multi-second
   deltas. Anything expensive should stop when the tab is hidden and resume
   when it comes back, rather than trying to catch up.

   `useSyncExternalStore` with an explicit server snapshot so SSR markup and
   the first client render agree.
   ========================================================================== */

function subscribe(onChange: () => void): () => void {
  document.addEventListener('visibilitychange', onChange);
  return () => document.removeEventListener('visibilitychange', onChange);
}

function getSnapshot(): boolean {
  return document.visibilityState === 'visible';
}

/** Assume visible on the server: the alternative flashes a paused state. */
function getServerSnapshot(): boolean {
  return true;
}

export function useVisibility(): boolean {
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}