Star Motes

// Star Motes — the demo's own source, extracted verbatim.
// From src/components/demos/scenes/set-23.tsx, export WebglStarMotes.
// Needs React 18+ and Tailwind CSS v4. The classes below include this site's
// token utilities (bg-panel, text-ink-dim, chip …); their values are served as
// CSS custom properties at /api/exports/tokens.json. The reduced-motion branch
// is part of the source, not an afterthought.
// 17 helpers the demo imports are inlined above it, verbatim.
// Imports three — that dependency is part of the source.

import { useEffect, useRef, useState } from "react";

import { AdditiveBlending, BufferAttribute, BufferGeometry, Mesh, OrthographicCamera, PlaneGeometry, Points, Scene, ShaderMaterial, Vector2, Vector3, WebGLRenderer } from "three";

export type DemoProps = Record<string, number | string | boolean>;

export function useReducedMotion(): boolean {
  const [reduced, setReduced] = useState<boolean>(() =>
    typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false
  );
  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const on = (e: MediaQueryListEvent) => setReduced(e.matches);
    mq.addEventListener("change", on);
    return () => mq.removeEventListener("change", on);
  }, []);
  return reduced;
}

function clamp(v: number, lo: number, hi: number): number {
  return v < lo ? lo : v > hi ? hi : v;
}

function num(v: number | string | boolean | undefined, fallback: number): number {
  return typeof v === "number" && Number.isFinite(v) ? v : fallback;
}

function rendererFor(canvas: HTMLCanvasElement): WebGLRenderer | null {
  try {
    const r = new WebGLRenderer({ canvas, antialias: false, alpha: true, powerPreference: "low-power" });
    r.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
    return r;
  } catch {
    return null;
  }
}

const QUAD_VERT = `
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = vec4(position.xy, 0.0, 1.0);
}
`;

const BACKDROP_FRAG = `
precision highp float;
uniform vec3 uInner;
uniform vec3 uOuter;
varying vec2 vUv;

void main() {
  vec2 d = (vUv - vec2(0.5, 1.20)) * vec2(1.0, 0.72);
  float t = clamp(1.0 - length(d) / 0.70, 0.0, 1.0);
  gl_FragColor = vec4(mix(uOuter, uInner, t * t), 1.0);
}
`;

function seeded(i: number): number {
  const x = Math.sin(i * 127.1 + 311.7) * 43758.5453123;
  return x - Math.floor(x);
}

interface StarLayer {
  /** How far the layer travels for a full pointer sweep, in field units. */
  parallax: number;
  /** Point size in CSS pixels, before the device pixel ratio. */
  size: number;
  /** Peak brightness. */
  glow: number;
}

const STAR_LAYERS: readonly StarLayer[] = [
  { parallax: 0.30, size: 2.5, glow: 0.95 },
  { parallax: 0.18, size: 1.7, glow: 0.72 },
  { parallax: 0.09, size: 1.1, glow: 0.52 },
];

const f3 = (v: number) => v.toFixed(3);

function layerFn(name: string, key: keyof StarLayer): string {
  const arms = STAR_LAYERS.map((l, i) =>
    i < STAR_LAYERS.length - 1 ? `  if (layer < ${i + 0.5}) return ${f3(l[key])};` : `  return ${f3(l[key])};`,
  );
  return `float ${name}(float layer) {\n${arms.join("\n")}\n}`;
}

const STAR_VERT = `
uniform float uTime;
uniform float uDpr;
uniform vec2 uShift;
attribute vec3 aSeed;
varying float vGlow;

${layerFn("layerParallax", "parallax")}

${layerFn("layerSize", "size")}

${layerFn("layerGlow", "glow")}

void main() {
  float layer = aSeed.x;
  vec3 p = position;
  p.x += uShift.x * layerParallax(layer);
  p.y += uShift.y * layerParallax(layer);

  // Twinkle: phase and rate both from the star's own seed, so no two are in
  // step and the field never pulses as a block.
  float ph = aSeed.y * 6.2831853;
  float rate = 0.55 + aSeed.z * 1.45;
  vGlow = layerGlow(layer) * (0.26 + 0.74 * (0.5 + 0.5 * sin(uTime * rate + ph)));

  gl_PointSize = layerSize(layer) * uDpr;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
}
`;

const STAR_FRAG = `
uniform vec3 uWarm;
uniform vec3 uCool;
varying float vGlow;

void main() {
  float d = length(gl_PointCoord - 0.5);
  float m = 1.0 - smoothstep(0.20, 0.5, d);
  if (m < 0.004) discard;
  // A four-point flare, so the brightest stars have a shape rather than a
  // smear of dots.
  float flare = max(0.0, 1.0 - abs(gl_PointCoord.x - 0.5) * 9.0)
              * max(0.0, 1.0 - abs(gl_PointCoord.y - 0.5) * 9.0);
  vec3 col = mix(uCool, uWarm, vGlow * vGlow);
  gl_FragColor = vec4(col, (m + flare * 0.22) * vGlow * 0.95);
}
`;

function watchSize(canvas: HTMLCanvasElement, apply: (w: number, h: number) => void): () => void {
  const host = canvas.parentElement ?? canvas;
  let w = 0;
  let h = 0;
  const measure = () => {
    const rect = host.getBoundingClientRect();
    const nw = Math.max(1, Math.round(rect.width));
    const nh = Math.max(1, Math.round(rect.height));
    if (nw === w && nh === h) return;
    w = nw;
    h = nh;
    apply(w, h);
  };
  measure();
  const ro = new ResizeObserver(measure);
  ro.observe(host);
  return () => ro.disconnect();
}

function watchVisible(canvas: HTMLCanvasElement): { visible: () => boolean; stop: () => void } {
  let onScreen = true;
  const io = new IntersectionObserver(([entry]) => { onScreen = entry.isIntersecting; });
  io.observe(canvas);
  return { visible: () => onScreen && !document.hidden, stop: () => io.disconnect() };
}

function StarFieldStill({ n }: { n: number }) {
  const stars = Array.from({ length: n }, (_, i) => {
    const layer = i % STAR_LAYERS.length;
    return {
      x: seeded(i * 3 + 1) * 100,
      y: seeded(i * 3 + 2) * 100,
      s: STAR_LAYERS[layer].size * 0.75,
      o: STAR_LAYERS[layer].glow * (0.45 + seeded(i * 3 + 3) * 0.5),
    };
  });
  return (
    <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_50%_120%,#111c33,transparent_70%),#05070c]">
      {stars.map((s, i) => (
        <span
          key={i}
          className="absolute rounded-full bg-white"
          style={{ left: `${s.x}%`, top: `${s.y}%`, width: s.s, height: s.s, opacity: s.o }}
        />
      ))}
    </div>
  );
}

export function WebglStarMotes({ density = 120 }: DemoProps) {
  const reduced = useReducedMotion();
  const n = Math.round(clamp(num(density, 120), 10, 300));
  const ref = useRef<HTMLCanvasElement>(null);
  const [noGl, setNoGl] = useState(false);

  useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const renderer = rendererFor(canvas);
    if (!renderer) {
      setNoGl(true);
      return;
    }

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

    // The sky first: one quad, so the asset needs no CSS behind it.
    const backdropMat = new ShaderMaterial({
      uniforms: {
        uInner: { value: new Vector3(0x11 / 255, 0x1c / 255, 0x33 / 255) },
        uOuter: { value: new Vector3(0x05 / 255, 0x07 / 255, 0x0c / 255) },
      },
      vertexShader: QUAD_VERT,
      fragmentShader: BACKDROP_FRAG,
      depthWrite: false,
      depthTest: false,
    });
    const backdrop = new Mesh(new PlaneGeometry(2, 2), backdropMat);
    backdrop.frustumCulled = false;
    scene.add(backdrop);

    // The stars: one cloud, one draw call, the layer carried per vertex.
    const position = new Float32Array(n * 3);
    const seed = new Float32Array(n * 3);
    for (let i = 0; i < n; i++) {
      position[i * 3] = (seeded(i * 3 + 1) - 0.5) * 2.9;
      position[i * 3 + 1] = (seeded(i * 3 + 2) - 0.5) * 2.9;
      position[i * 3 + 2] = 0;
      seed[i * 3] = i % STAR_LAYERS.length;
      seed[i * 3 + 1] = seeded(i * 3 + 3);
      seed[i * 3 + 2] = seeded(i * 3 + 5);
    }
    const geo = new BufferGeometry();
    geo.setAttribute("position", new BufferAttribute(position, 3));
    geo.setAttribute("aSeed", new BufferAttribute(seed, 3));

    const starMat = new ShaderMaterial({
      uniforms: {
        uTime: { value: 0 },
        uDpr: { value: Math.min(window.devicePixelRatio || 1, 2) },
        uShift: { value: new Vector2(0, 0) },
        uWarm: { value: new Vector3(1.0, 0.97, 0.90) },
        uCool: { value: new Vector3(0.68, 0.78, 0.96) },
      },
      vertexShader: STAR_VERT,
      fragmentShader: STAR_FRAG,
      transparent: true,
      depthWrite: false,
      blending: AdditiveBlending,
    });
    const stars = new Points(geo, starMat);
    // The positions are written once and never read back, and the layer offset
    // lives in the shader, so a bounding sphere would be recomputed per frame
    // for a cloud that cannot leave the frustum.
    stars.frustumCulled = false;
    scene.add(stars);

    const target = { x: 0, y: 0 };
    const eased = { x: 0, y: 0 };
    const onMove = (e: PointerEvent) => {
      const r = canvas.getBoundingClientRect();
      target.x = ((e.clientX - r.left) / Math.max(1, r.width) - 0.5) * 2;
      target.y = ((e.clientY - r.top) / Math.max(1, r.height) - 0.5) * 2;
    };
    const onLeave = () => { target.x = 0; target.y = 0; };
    canvas.addEventListener("pointermove", onMove);
    canvas.addEventListener("pointerleave", onLeave);

    const stopSize = watchSize(canvas, (w, h) => {
      renderer.setSize(w, h, false);
    });

    const vis = watchVisible(canvas);
    const draw = (t: number) => {
      starMat.uniforms.uTime.value = t;
      eased.x += (target.x - eased.x) * 0.055;
      eased.y += (target.y - eased.y) * 0.055;
      // Negated on y so the field leans away from the pointer rather than with
      // it, which is the direction that reads as depth.
      starMat.uniforms.uShift.value.set(eased.x, -eased.y);
      renderer.render(scene, camera);
    };

    let raf = 0;
    let start = 0;
    const loop = (now: number) => {
      raf = requestAnimationFrame(loop);
      if (!vis.visible()) return;
      if (!start) start = now;
      draw((now - start) / 1000);
    };

    if (reduced) {
      // One still frame: every star is at its own brightness for t = 0 and the
      // field is centred, so the composition is intact without the drift.
      draw(0);
    } else {
      raf = requestAnimationFrame(loop);
    }

    return () => {
      cancelAnimationFrame(raf);
      stopSize();
      vis.stop();
      canvas.removeEventListener("pointermove", onMove);
      canvas.removeEventListener("pointerleave", onLeave);
      backdrop.geometry.dispose();
      backdropMat.dispose();
      geo.dispose();
      starMat.dispose();
      renderer.dispose();
    };
  }, [reduced, n]);

  return (
    <div className="relative h-full w-full overflow-hidden bg-[#05070c]">
      {noGl ? (
        <StarFieldStill n={n} />
      ) : (
        <canvas
          ref={ref}
          role="img"
          aria-label={`A field of ${n} stars spread over ${STAR_LAYERS.length} depth planes, drifting against the pointer`}
          className="block h-full w-full"
        />
      )}
      <p className="pointer-events-none absolute bottom-2 right-3 rounded bg-black/45 px-1.5 py-0.5 font-mono text-[10px] leading-tight text-white/70">
        {noGl
          ? `${n} stars · still field · no WebGL context`
          : `${n} stars · ${STAR_LAYERS.length} depth layers · 2 draw calls`}
      </p>
      {!noGl && (
        <p className="pointer-events-none absolute left-3 top-2 font-mono text-[10px] text-white/45">
          move the pointer to drift
        </p>
      )}
    </div>
  );
}