Anti-Aliased Point Discs

'use client';

import { useEffect, useRef, useState } from 'react';
import * as THREE from 'three';
import { cn } from '@/lib/utils';
import { useRaf } from '@/hooks/use-raf';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
import { useResizeObserver } from '@/hooks/use-resize-observer';
import { createRng } from '@/lib/prng';
import { disposeObject, disposeRenderer, hasWebGL, pixelRatio } from '@/lib/webgl';
import {
  ANTIALIASED_DISC_FRAG,
  ANTIALIASED_DISC_VERT,
} from '@/components/motion/shaders/antialiased-disc-fragment';

/* ==========================================================================
   Anti-Aliased Point Discs
   --------------------------------------------------------------------------
   `gl_PointSize` gives you a square. This is the pair of shader tricks that
   turns that square into a dot which looks the same on a 1x monitor and a 3x
   phone, with no MSAA and no texture:

     1. the fragment shader carves a disc out of the sprite with a smoothstep
        across the outer few percent of its radius, and discards the rest;
     2. the vertex shader clamps the point size to the hardware floor and then
        divides the alpha by the area that clamping invented.

   The field is a phyllotaxis spiral so that the size ramp is visible in one
   frame: sub-pixel dots at the core, twenty-pixel dots at the rim, both
   correct.
   ========================================================================== */

export interface AntialiasedDiscFragmentProps {
  /** Dot count. Cost is linear; 4000 is comfortable on integrated graphics. */
  count?: number;
  /** Disc radius in CSS pixels at the centre of the field. */
  minRadius?: number;
  /** Disc radius in CSS pixels at the rim. */
  maxRadius?: number;
  /** Field diameter as a fraction of the container's short side. */
  fieldRadius?: number;
  /** Base angular speed in radians per second. The rim runs faster. */
  spin?: number;
  /**
   * Width of the anti-aliased band as a fraction of the sprite radius.
   * 0.07 is the smallest value that still reads as round at 2px.
   */
  softness?: number;
  opacity?: number;
  /** Tint at the centre of the field. */
  colorInner?: string;
  /** Tint at the rim. */
  colorOuter?: string;
  seed?: number | string;
  className?: string;
}

interface Uniforms {
  /** three types `uniforms` as an open record; without this the object is not assignable. */
  [name: string]: THREE.IUniform;
  uElapsed: { value: number };
  uExtent: { value: number };
  uPixelRatio: { value: number };
  uSpin: { value: number };
  uFieldRadius: { value: number };
  uMinRadius: { value: number };
  uMaxRadius: { value: number };
  uOpacity: { value: number };
  uColorInner: { value: THREE.Color };
  uColorOuter: { value: THREE.Color };
  uEdgeInner: { value: number };
}

interface Stage {
  resize: (width: number, height: number) => void;
  draw: (elapsed: number) => void;
}

/** 137.507…°, the angle that makes a phyllotaxis spiral pack evenly. */
const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));

/** Frame drawn when motion is suppressed. Non-zero so the arms are sheared. */
const STATIC_ELAPSED = 6;

// #region critical
export function AntialiasedDiscFragment({
  count = 4000,
  minRadius = 0.5,
  maxRadius = 10,
  fieldRadius = 0.92,
  spin = 0.08,
  softness = 0.07,
  opacity = 1,
  colorInner = '#ffffff',
  colorOuter = '#6f7680',
  seed = 'antialiased-disc-fragment',
  className,
}: AntialiasedDiscFragmentProps) {
  const host = useRef<HTMLDivElement>(null);
  const stage = useRef<Stage | null>(null);
  const [unsupported, setUnsupported] = useState(false);

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

  const reduced = useReducedMotion();
  const ready = width > 0 && height > 0;

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

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

    const renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });
    renderer.setPixelRatio(pixelRatio());
    renderer.setClearAlpha(0);

    const scene = new THREE.Scene();
    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
    camera.position.z = 1;

    const rng = createRng(seed);
    const positions = new Float32Array(count * 3); // all zeros; the shader places them
    const disc = new Float32Array(count * 2);

    for (let i = 0; i < count; i += 1) {
      // sqrt spacing, not linear: linear spacing crowds the centre, which is
      // exactly where the sub-pixel dots are and where crowding is least
      // forgiving.
      const t = Math.sqrt((i + 0.5) / count);
      // A little seeded angular jitter breaks the moiré that a pure golden
      // spiral shows at small radii on a low-DPR screen.
      disc[i * 2] = t;
      disc[i * 2 + 1] = i * GOLDEN_ANGLE + (rng() - 0.5) * 0.12;
    }

    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    geometry.setAttribute('aDisc', new THREE.BufferAttribute(disc, 2));

    const uniforms: Uniforms = {
      uElapsed: { value: 0 },
      uExtent: { value: 1 },
      uPixelRatio: { value: renderer.getPixelRatio() },
      uSpin: { value: spin },
      uFieldRadius: { value: fieldRadius },
      uMinRadius: { value: minRadius },
      uMaxRadius: { value: maxRadius },
      uOpacity: { value: opacity },
      uColorInner: { value: new THREE.Color(colorInner) },
      uColorOuter: { value: new THREE.Color(colorOuter) },
      // The band always ENDS at 0.5 — the sprite's own edge. Softening inward
      // keeps the disc inscribed in the sprite; softening outward would clip
      // the falloff square at the corners.
      uEdgeInner: { value: 0.5 - softness },
    };

    const material = new THREE.ShaderMaterial({
      vertexShader: ANTIALIASED_DISC_VERT,
      fragmentShader: ANTIALIASED_DISC_FRAG,
      uniforms,
      transparent: true,
      depthTest: false,
      depthWrite: false,
      // Additive would blow the overlapping core to white. Normal blending
      // with a discard keeps the density readable where the dots overlap.
      blending: THREE.NormalBlending,
    });

    const points = new THREE.Points(geometry, material);
    points.frustumCulled = false;
    scene.add(points);

    el.appendChild(renderer.domElement);
    renderer.domElement.style.display = 'block';
    renderer.domElement.style.width = '100%';
    renderer.domElement.style.height = '100%';

    const resize = (w: number, h: number) => {
      renderer.setSize(w, h, false);
      camera.left = -w / 2;
      camera.right = w / 2;
      camera.top = h / 2;
      camera.bottom = -h / 2;
      camera.updateProjectionMatrix();
      uniforms.uExtent.value = Math.min(w, h);
      // Re-read rather than assume: moving a window between a retina and a
      // non-retina display changes devicePixelRatio without changing the
      // canvas size, and a stale value breaks the whole compensation.
      uniforms.uPixelRatio.value = renderer.getPixelRatio();
    };

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

    resize(size.current.width, size.current.height);
    stage.current = { resize, draw };
    draw(STATIC_ELAPSED);

    return () => {
      stage.current = null;
      disposeObject(scene);
      material.dispose();
      disposeRenderer(renderer);
      renderer.domElement.remove();
    };
  }, [
    ready,
    count,
    minRadius,
    maxRadius,
    fieldRadius,
    spin,
    softness,
    opacity,
    colorInner,
    colorOuter,
    seed,
  ]);

  useEffect(() => {
    stage.current?.resize(width, height);
    if (reduced) stage.current?.draw(STATIC_ELAPSED);
  }, [width, height, reduced]);

  useRaf((_dt, elapsed) => stage.current?.draw(elapsed), ready && !reduced && !unsupported);
  // #endregion critical

  return (
    <div ref={host} className={cn('relative h-full w-full overflow-hidden', className)}>
      {unsupported ? (
        <div className="absolute inset-0 grid place-items-center">
          <div
            className="aspect-square h-[80%] rounded-full border border-line"
            style={{
              background:
                'radial-gradient(circle at 50% 50%, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 60%, transparent 72%)',
            }}
          />
        </div>
      ) : null}
    </div>
  );
}

/* ==========================================================================
   Anti-Aliased Point Discs — GLSL
   --------------------------------------------------------------------------
   A point sprite is a square. Everything that makes it look like a round dot
   happens in the fragment shader, and everything that makes it look like the
   SAME round dot on every display happens in the vertex shader.

   The two halves are inseparable, which is why they live in one file:
   clamping the point size without correcting the alpha, or correcting the
   alpha without clamping the size, both produce a field whose density changes
   with the device pixel ratio.
   ========================================================================== */

/** `aDisc = vec2(normalisedRadius 0..1, angle in radians)`. */
export const ANTIALIASED_DISC_VERT = /* glsl */ `
attribute vec2 aDisc;

uniform float uElapsed;
uniform float uExtent;
uniform float uPixelRatio;
uniform float uSpin;
uniform float uFieldRadius;
uniform float uMinRadius;
uniform float uMaxRadius;
uniform float uOpacity;

varying float vAlpha;
varying float vAlphaScale;
varying float vT;

const float MIN_POINT_SIZE = 2.0;
const float UNCLAMPED_MIN_POINT_SIZE = 1.0;

void main() {
  float t     = aDisc.x;
  // Differential rotation: the rim turns 1.6x faster than the core, which
  // shears the spiral arms instead of spinning the whole field rigidly.
  float angle = aDisc.y + uElapsed * uSpin * (0.6 + 1.0 * t);
  float r     = t * uFieldRadius * uExtent * 0.5;

  vec2 p = vec2(cos(angle), sin(angle)) * r;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 0.0, 1.0);

  vT     = t;
  vAlpha = uOpacity * (0.30 + 0.70 * t);

  // The size ramp is the point of the component: the innermost dots are
  // sub-pixel at DPR 1 and the outermost are twenty pixels across, and both
  // ends have to survive the same clamp.
  float radiusPx = mix(uMinRadius, uMaxRadius, t * t);
  float raw       = radiusPx * 2.0 * uPixelRatio;
  float unclamped = max(UNCLAMPED_MIN_POINT_SIZE, raw);
  float clamped   = max(MIN_POINT_SIZE, raw);

  /* Area-equivalent alpha compensation. "clamped" is what the GPU will
     actually rasterise; "unclamped" is what the design asked for. The ratio of
     the squares is the ratio of covered areas, so multiplying alpha by it
     keeps total emitted light constant and the field's perceived density
     identical across device pixel ratios. */
  vAlphaScale  = (unclamped * unclamped) / (clamped * clamped);
  gl_PointSize = clamped;
}
`;

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

uniform vec3  uColorInner;
uniform vec3  uColorOuter;
uniform float uEdgeInner;

varying float vAlpha;
varying float vAlphaScale;
varying float vT;

/* Below this the pixel contributes nothing a display can show, and blending it
   still costs a read-modify-write of the framebuffer. Discarding is the
   cheaper answer on the fill-bound end of a large point field. */
const float ALPHA_EPSILON = 0.003;

void main() {
  vec2  centered = gl_PointCoord - vec2(0.5);
  float d = length(centered);

  // One smoothstep across the outer few percent of the radius is the whole
  // anti-aliasing story. uEdgeInner is 0.5 - softness, so the band always
  // ends exactly at the sprite edge and the disc never gets clipped square.
  float disc = 1.0 - smoothstep(uEdgeInner, 0.5, d);

  float alpha = vAlpha * vAlphaScale * disc;
  if (alpha <= ALPHA_EPSILON) discard;

  gl_FragColor = vec4(mix(uColorInner, uColorOuter, vT), alpha);
}
`;

/* ==========================================================================
   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 } 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;
}

import type * as THREE from 'three';

/* ==========================================================================
   WebGL context lifecycle.
   --------------------------------------------------------------------------
   Chromium allows roughly 16 live WebGL contexts per RENDERER PROCESS (8 on
   low-end devices). Creating the 17th does not fail — it fires
   `webglcontextlost` on the OLDEST one, so an unrelated component elsewhere
   on the page goes black. Same-origin iframes share the renderer process, so
   isolating previews in iframes does not raise the ceiling.

   The only real fix is to release contexts on unmount, and `renderer.dispose()`
   ALONE DOES NOT DO THAT. It frees GPU objects but leaves the context itself
   alive until GC decides otherwise, which may be never. `forceContextLoss()`
   is the call that actually hands it back.
   ========================================================================== */

/**
 * Fully release a three.js renderer. Call this in the `useEffect` cleanup of
 * any component that constructs a `WebGLRenderer` — the preview host drives
 * unmount via `<Activity mode="hidden">`, so ordinary cleanup IS the disposal
 * path and nothing component-specific is required.
 */
export function disposeRenderer(renderer: THREE.WebGLRenderer | null | undefined): void {
  if (!renderer) return;

  // Stop the loop first: a queued frame that renders into a lost context
  // throws, and the throw escapes the cleanup function.
  renderer.setAnimationLoop(null);
  renderer.dispose();
  renderer.forceContextLoss();

  const canvas = renderer.domElement;
  if (canvas) {
    // Zeroing the backing store releases the drawing buffer immediately
    // instead of holding width×height×4 bytes until the node is collected.
    canvas.width = 0;
    canvas.height = 0;
  }
}

/**
 * Release a raw WebGL context (ogl, or hand-written GL). The extension is the
 * only portable way to do it; it is absent in some headless configurations,
 * hence the optional call.
 */
export function loseContext(gl: WebGLRenderingContext | WebGL2RenderingContext | null | undefined): void {
  if (!gl) return;
  gl.getExtension('WEBGL_lose_context')?.loseContext();
}

/** Recursively dispose geometries, materials and textures under a root. */
export function disposeObject(root: THREE.Object3D | null | undefined): void {
  if (!root) return;
  root.traverse((obj) => {
    const mesh = obj as THREE.Mesh;
    mesh.geometry?.dispose?.();
    const material = mesh.material;
    if (!material) return;
    const materials = Array.isArray(material) ? material : [material];
    for (const m of materials) {
      for (const value of Object.values(m as unknown as Record<string, unknown>)) {
        if (value && typeof value === 'object' && 'isTexture' in value) {
          (value as THREE.Texture).dispose();
        }
      }
      m.dispose?.();
    }
  });
}

/**
 * Device pixel ratio capped for fill-rate. Above 2 the visual gain is nil and
 * the cost is quadratic; on a 3x phone an uncapped full-screen shader is the
 * single most common cause of a janky first paint.
 */
export function pixelRatio(max = 2): number {
  if (typeof window === 'undefined') return 1;
  return Math.min(window.devicePixelRatio || 1, max);
}

/**
 * Whether WebGL is actually available. Some browsers expose the constructor
 * but fail to create a context (blocklisted GPU, no hardware acceleration);
 * a component that assumes success renders a permanently blank box.
 */
export function hasWebGL(): boolean {
  if (typeof document === 'undefined') return false;
  try {
    const canvas = document.createElement('canvas');
    const gl =
      canvas.getContext('webgl2') ??
      canvas.getContext('webgl') ??
      canvas.getContext('experimental-webgl');
    if (!gl) return false;
    (gl as WebGLRenderingContext).getExtension('WEBGL_lose_context')?.loseContext();
    return true;
  } catch {
    return false;
  }
}