thursday-agent 0.5.0 → 0.6.0

package/features/bot/components/bot-mark.tsx

@@ -1,8 +1,14 @@
 "use client";
 
 import { useEffect, useId, useMemo, useRef } from "react";
-import { createVoiceFollower } from "@/lib/realtime/realtime.tap";
-import { MARK_BANDS, type MarkShape } from "../mark.const";
+import { createVoiceFollower, SPECTRUM_BANDS } from "@/lib/live/live.tap";
+import {
+  MARK_PAINTS,
+  type MarkPaint,
+  type MarkPaintLook,
+  type MarkPaintSpec,
+  type MarkShape,
+} from "../mark.const";
 
 // Procedural bot avatar: a generated silhouette with two eyes, animated per frame from refs.
 
@@ -121,6 +127,22 @@ function polyOutline(sides: number, cornerRatio: number, rotDeg: number): Pt[] {
   return out;
 }
 
+/** The classic heart curve, a little taller than wide. */
+function heartOutline(): Pt[] {
+  const out: Pt[] = [];
+  for (let i = 0; i < 400; i++) {
+    const t = (i / 400) * TAU;
+    const x = 16 * Math.sin(t) ** 3;
+    const y =
+      13 * Math.cos(t) -
+      5 * Math.cos(2 * t) -
+      2 * Math.cos(3 * t) -
+      Math.cos(4 * t);
+    out.push([CENTER + x * 6.6, CENTER - (y + 2.2) * 7.26]);
+  }
+  return out;
+}
+
 function sub(a: Pt, b: Pt): Pt {
   return [a[0] - b[0], a[1] - b[1]];
 }
@@ -266,38 +288,23 @@ export type MarkOptions = {
   stretch: number;
   idle: boolean;
   liveliness: number;
-  glance: number;
   float: number;
   breathe: number;
   speed: number;
   blink: boolean;
 
-  /** Peak opacity of the soft shadow that swells under the mark while thinking, percent. 0 disables. */
-  shadow: number;
-  /** Soft halo around the silhouette, cut out of the head; blur radius in view-box units. 0 disables. */
-  glow: number;
-  /** Aura color. null follows the mark color. */
-  glowColor: string | null;
-  /** Aura opacity, percent. */
-  glowStrength: number;
-  /** Border around the silhouette so it still reads on a same-colored background. 0 disables. */
-  rim: number;
-  /** Defaults to the theme text color, the one color guaranteed to differ from the background. */
-  rimColor: string;
-
   notify: boolean;
   notifyAngle: number;
   notifyDist: number;
   notifyR: number;
   notifyRing: number;
-  notifyColor: string;
 };
 
 const MARK_DEFAULTS: MarkOptions = {
   shape: "blob",
   sides: 3,
   corner: 0.74,
-  rotation: -180,
+  rotation: 0,
   squircle: 4.6,
   wobble: 0.2,
   seed: 113,
@@ -328,53 +335,18 @@ const MARK_DEFAULTS: MarkOptions = {
   stretch: 15,
   idle: true,
   liveliness: 55,
-  glance: 22,
   float: 7,
   breathe: 3.7,
   speed: 1.7,
   blink: true,
 
-  shadow: 16,
-  glow: 0,
-  glowColor: null,
-  glowStrength: 55,
-  rim: 0,
-  rimColor: "currentColor",
-
   notify: false,
   notifyAngle: 41,
   notifyDist: 109,
   notifyR: 25,
   notifyRing: 11,
-  notifyColor: "#FF3B30",
 };
 
-/* Per-instance variation: shape and color stay, only the values inside the shape roll
- * from a seed the caller picks (task id for one face per task, bot name for one per bot). */
-const VARY = {
-  /** Blob depth. The seed already changes the whole silhouette, so keep this slight. */
-  wobble: [0.8, 1.35],
-  /** Poly. Below 0.45 it rounds into a circle. */
-  corner: [0.45, 0.77],
-  rotation: [-180, 180],
-  /** Squircle. 4 is nearly square, 12 nearly round. */
-  squircle: [4, 12],
-} as const satisfies Record<string, readonly [number, number]>;
-
-/** Roll order defines what a seed means; reordering changes every bot's face. */
-function varyOptions(cfg: MarkOptions, seed: number): MarkOptions {
-  if (!seed) return cfg;
-  const rnd = mulberry32(seed);
-  const pick = ([lo, hi]: readonly [number, number]) => lo + rnd() * (hi - lo);
-  return {
-    ...cfg,
-    wobble: cfg.wobble * pick(VARY.wobble),
-    corner: pick(VARY.corner),
-    rotation: pick(VARY.rotation),
-    squircle: pick(VARY.squircle),
-  };
-}
-
 /** Silhouettes are scaled to the area of the circle of radius R so they read the same size,
  *  capped so sharp corners stay inside the view box. */
 const FIT_LIMIT = 130;
@@ -400,7 +372,7 @@ function fitRadii(radii: number[]): number[] {
 const WARP = 0.035;
 
 /** Bends a ruled outline by a few slow waves. Blob outlines already wobble and are left alone. */
-function warpRadii(radii: number[], seed: number): number[] {
+function warpRadii(radii: number[], seed: number, depth = WARP): number[] {
   const rnd = mulberry32(seed ^ 0x2f6b);
   const waves = [2, 3, 5].map((k) => ({
     k,
@@ -414,7 +386,33 @@ function warpRadii(radii: number[], seed: number): number[] {
     return d;
   });
   const peak = Math.max(...offsets.map(Math.abs)) || 1;
-  return radii.map((r, i) => r * (1 + (WARP * offsets[i]) / peak));
+  return radii.map((r, i) => r * (1 + (depth * offsets[i]) / peak));
+}
+
+/**
+ * A true heart has the only sharp tip and deep notch of any mark. Averaging the
+ * radii blunts both, then it bends and leans by the seed like poly and squircle
+ * do, a little more.
+ */
+function softenHeart(radii: number[], seed: number): number[] {
+  let soft = radii;
+  for (let pass = 0; pass < 2; pass++) {
+    const prev = soft;
+    soft = prev.map((_, i) => {
+      let sum = 0;
+      for (let k = -3; k <= 3; k++) sum += prev[(i + k + RES) % RES];
+      return sum / 7;
+    });
+  }
+  const mean = soft.reduce((sum, r) => sum + r, 0) / RES;
+  const bent = warpRadii(
+    soft.map((r) => r * 0.95 + mean * 0.05),
+    seed,
+    0.05,
+  );
+  // A few degrees of lean, one sample at a time.
+  const lean = Math.round((mulberry32(seed ^ 0x51f1)() * 2 - 1) * 3);
+  return lean ? bent.map((_, i) => bent[(i - lean + RES * 2) % RES]) : bent;
 }
 
 const radiiCache = new Map<string, number[]>();
@@ -426,12 +424,19 @@ function radiiFor(cfg: MarkOptions, shape: MarkShape, seed: number): number[] {
       ? `poly|${cfg.sides}|${cfg.corner}|${cfg.rotation}|${seed}`
       : shape === "squircle"
         ? `squircle|${cfg.squircle}|${seed}`
-        : `blob|${cfg.wobble}|${seed}`
+        : shape === "heart"
+          ? `heart|${seed}`
+          : `blob|${cfg.wobble}|${seed}`
   }|${cfg.autofit}`;
   const hit = radiiCache.get(key);
   if (hit) return hit;
   const traced = toRadii(outlineFor(cfg, shape, seed));
-  const raw = shape === "blob" ? traced : warpRadii(traced, seed);
+  const raw =
+    shape === "blob"
+      ? traced
+      : shape === "heart"
+        ? softenHeart(traced, seed)
+        : warpRadii(traced, seed);
   const radii = cfg.autofit ? fitRadii(raw) : raw;
   if (radiiCache.size > 400) radiiCache.clear();
   radiiCache.set(key, radii);
@@ -441,9 +446,82 @@ function radiiFor(cfg: MarkOptions, shape: MarkShape, seed: number): number[] {
 function outlineFor(cfg: MarkOptions, shape: MarkShape, seed: number): Pt[] {
   if (shape === "squircle") return squircleOutline(cfg.squircle);
   if (shape === "poly") return polyOutline(cfg.sides, cfg.corner, cfg.rotation);
+  if (shape === "heart") return heartOutline();
   return blobOutline(seed, cfg.wobble);
 }
 
+/**
+ * Where a mark sits between the smallest the app draws (14px, 0) and the bot
+ * page's 112px (1). The SVG scales evenly, but a small face has fewer pixels for
+ * each band, so paints and a crossed-out X are drawn denser as this falls.
+ */
+const growOf = (size: number) => clamp((size - 14) / 98, 0, 1);
+
+/** One run of the sliding rainbow: shorter on small marks, so more of its colours fit. */
+const spanOf = (grow: number) => 345 * (0.7 + 0.3 * grow);
+
+/** Where each look's gradient runs, in the 240-unit box. */
+function paintAxis(
+  look: MarkPaintLook,
+  grow: number,
+): Pick<
+  React.SVGProps<SVGLinearGradientElement>,
+  "gradientUnits" | "x1" | "y1" | "x2" | "y2" | "spreadMethod"
+> {
+  if (look === "flow") {
+    return {
+      gradientUnits: "userSpaceOnUse",
+      x1: 0,
+      y1: 0,
+      x2: spanOf(grow),
+      y2: 0,
+      spreadMethod: "repeat",
+    };
+  }
+  // In box units like the rest, so the wider blurred layer wears the same ramp as the head.
+  return {
+    gradientUnits: "userSpaceOnUse",
+    x1: 0,
+    y1: 0,
+    x2: look === "duo" ? BOX : 0,
+    y2: BOX,
+  };
+}
+
+/** A paint's stops. Aurora's gradient is only its night. */
+function paintStops({
+  look,
+  colors,
+}: MarkPaintSpec): { offset: number; color: string }[] {
+  const used = look === "aurora" ? colors.slice(0, 2) : colors;
+  return used.map((color, i) => ({ offset: i / (used.length - 1), color }));
+}
+
+/** Aurora's curtains: where each hangs, how far it sways and how long one sway takes (s). */
+const CURTAINS = [
+  { cx: 42, sway: 40, period: 5 },
+  { cx: 134, sway: -35, period: 6.5 },
+  { cx: 209, sway: 29, period: 4.5 },
+];
+const CURTAIN_Y = 91;
+/** Curtains grow broader and softer on small marks, so they read as a glow, not a stripe. */
+const curtainRxOf = (grow: number) => 60 - 29 * grow;
+const curtainBlurOf = (grow: number) => 34 - 12 * grow;
+
+/** Below this relative luminance a body sinks into a dark page. */
+const DARK_BODY = 0.06;
+
+/** Relative luminance of a #rrggbb colour; null for anything else (currentColor follows the theme). */
+function luminance(color: string): number | null {
+  const hex = /^#([0-9a-f]{6})$/i.exec(color);
+  if (!hex) return null;
+  const channel = (at: number) => {
+    const c = Number.parseInt(hex[1].slice(at, at + 2), 16) / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(0) + 0.7152 * channel(2) + 0.0722 * channel(4);
+}
+
 /* Idle beats: small unrelated motions picked at random, weighted by state. Each returns
  * per-frame channel offsets for progress p in 0..1 and a direction. `eyeLen`/`eyeWid`
  * scale along the eye's own axis, so they still mean shorter/wider when the eye is tilted. */
@@ -762,8 +840,6 @@ type StateShape = {
   /** Constant gaze offset, box units, on top of pointer tracking and drift. */
   gazeX: number;
   gazeY: number;
-  /** 1 lets the shadow through, 0 blocks it; eased like the other channels. */
-  shadow: number;
 };
 
 /** Resting-pose targets per state. */
@@ -777,7 +853,6 @@ const STATE_SHAPE: Record<MarkState, StateShape> = {
     breathe: 1,
     float: 1,
     blink: 1,
-    shadow: 0,
     lean: 0,
     aspect: 1,
     gazeX: 0,
@@ -792,7 +867,6 @@ const STATE_SHAPE: Record<MarkState, StateShape> = {
     breathe: 2.2,
     float: 0.6,
     blink: 0.6,
-    shadow: 0,
     lean: 0,
     aspect: 1.03,
     gazeX: 0,
@@ -807,7 +881,6 @@ const STATE_SHAPE: Record<MarkState, StateShape> = {
     breathe: 0.45,
     float: 0.35,
     blink: 1.8,
-    shadow: 0,
     lean: 0,
     aspect: 0.97,
     gazeX: 0,
@@ -822,7 +895,6 @@ const STATE_SHAPE: Record<MarkState, StateShape> = {
     breathe: 1.3,
     float: 1.4,
     blink: 0.8,
-    shadow: 1,
     lean: 7,
     aspect: 1.04,
     gazeX: -9,
@@ -837,7 +909,6 @@ const STATE_SHAPE: Record<MarkState, StateShape> = {
     breathe: 0.6,
     float: 0.5,
     blink: 1.3,
-    shadow: 0,
     lean: -6,
     aspect: 1,
     gazeX: 15,
@@ -854,7 +925,6 @@ const STATE_SHAPE: Record<MarkState, StateShape> = {
     breathe: 0.4,
     float: 0.5,
     blink: 1.2,
-    shadow: 0,
     lean: 0,
     aspect: 1,
     gazeX: 0,
@@ -863,7 +933,7 @@ const STATE_SHAPE: Record<MarkState, StateShape> = {
 };
 
 /** What the follower reads while the mark is not speaking. */
-const SILENT: number[] = new Array<number>(MARK_BANDS).fill(0);
+const SILENT: number[] = new Array<number>(SPECTRUM_BANDS).fill(0);
 
 /**
  * Milliseconds to the next blink, irregular the way a person's are: mostly a
@@ -902,23 +972,19 @@ export type BotMarkProps = {
   seed?: number | string;
   color?: string;
   shape?: MarkShape;
-  /**
-   * Nudges this instance's silhouette (VARY) while keeping shape and color. A value is
-   * the seed (task id or bot name); `true` uses useId so server and client agree.
-   */
-  vary?: boolean | number | string;
   /** Stroke instead of fill; same as `options.fill: false`. */
   outline?: boolean;
+  /** A paint (MARK_PAINTS) worn in place of `color`. */
+  paint?: MarkPaint;
   notify?: boolean;
+  /** Eyes crossed out: a stopped thread, or a call that failed. */
+  crossed?: boolean;
   state?: MarkState;
-  /** Read once per animation frame. Use this for live audio instead of React state. */
-  getLevel?: () => number;
-  /** MARK_BANDS values in 0..1, low frequencies first, read once per frame. Where the energy sits sets the shape, how much sets the size. */
+  /** SPECTRUM_BANDS values in 0..1, low frequencies first, read once per frame. Where the energy sits sets the shape, how much sets the size. */
   getSpectrum?: () => ArrayLike<number>;
   /** Per-instance overrides; omitted keys fall back to MARK_DEFAULTS. Pass a stable object, a new literal each render re-derives the silhouette. */
   options?: Partial<MarkOptions>;
   className?: string;
-  svgRef?: React.RefObject<SVGSVGElement | null>;
 };
 
 /** Cheap string hash so a name or id can seed the mark. */
@@ -936,62 +1002,56 @@ export function BotMark({
   seed,
   color,
   shape,
-  vary,
   outline,
+  paint,
   notify,
+  crossed,
   state = "idle",
-  getLevel,
   getSpectrum,
   options,
   className,
-  svgRef,
 }: BotMarkProps) {
   const clipId = useId();
-  // 0 means no variation. `true` falls back to useId, the only per-instance value
-  // server and client agree on.
-  const varySeed = useMemo(() => {
-    if (vary === undefined || vary === false) return 0;
-    return hashSeed(vary === true ? clipId : vary) || 1;
-  }, [vary, clipId]);
   const cfg = useMemo(
     () =>
-      varyOptions(
-        {
-          ...MARK_DEFAULTS,
-          ...options,
-          ...(outline === undefined ? {} : { fill: !outline }),
-        } as MarkOptions,
-        varySeed,
-      ),
-    [options, outline, varySeed],
+      ({
+        ...MARK_DEFAULTS,
+        ...options,
+        ...(outline === undefined ? {} : { fill: !outline }),
+      }) as MarkOptions,
+    [options, outline],
   );
-  const glowId = `${clipId}-glow`;
-  const haloId = `${clipId}-halo`;
   const maskId = `${clipId}-mask`;
-  const shadowId = `${clipId}-shadow`;
+  const paintId = `${clipId}-paint`;
+  const curtainId = `${clipId}-curtain`;
   const lifeRef = useRef<SVGGElement>(null);
   const eyesRef = useRef<SVGGElement>(null);
   const headRef = useRef<SVGPathElement>(null);
   const clipRef = useRef<SVGPathElement>(null);
   const eyeLRef = useRef<SVGGElement>(null);
   const eyeRRef = useRef<SVGGElement>(null);
-  const glowRef = useRef<SVGPathElement>(null);
-  const haloHeadRef = useRef<SVGPathElement>(null);
-  const shadowRef = useRef<SVGPathElement>(null);
   const maskHeadRef = useRef<SVGPathElement>(null);
-  const rimRef = useRef<SVGPathElement>(null);
-  const localSvg = useRef<SVGSVGElement>(null);
-  const svg = svgRef ?? localSvg;
-
-  const theSeed = seed === undefined ? cfg.seed : hashSeed(seed);
-  // Blob silhouettes come from the seed, so variation goes through the seed too; the
-  // idle phase splits here so neighboring marks do not breathe in sync.
-  const shapeSeed = varySeed
-    ? ((theSeed ^ Math.imul(varySeed, 0x9e3779b1)) >>> 0) % 10000
-    : theSeed;
+  const paintRef = useRef<SVGLinearGradientElement>(null);
+  const curtainRefs = useRef<(SVGEllipseElement | null)[]>([]);
+  const inkEyesRef = useRef<SVGGElement>(null);
+  const inkEyeLRef = useRef<SVGGElement>(null);
+  const inkEyeRRef = useRef<SVGGElement>(null);
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  const shapeSeed = seed === undefined ? cfg.seed : hashSeed(seed);
   const theShape = shape ?? cfg.shape;
   const theFg = color ?? cfg.color;
   const notifying = notify ?? cfg.notify;
+  const spec = paint ? MARK_PAINTS[paint] : null;
+  const grow = growOf(size);
+  // A dark body draws its eyes: as holes they show the dark page it sinks into.
+  const edge = spec
+    ? "edge" in spec
+      ? spec.edge
+      : null
+    : (luminance(theFg) ?? 1) < DARK_BODY
+      ? "dark"
+      : null;
 
   // While deforming, the head is redrawn per frame; memo only seeds the initial `d`.
   const radii = useMemo(
@@ -1031,8 +1091,28 @@ export function BotMark({
   // the tree at 60 fps. `radii` and `shapeSeed` go through the ref rather than the
   // effect deps: the loop mounts once, and restarting it on a seed change (the create
   // form retypes the name) would snap the eyes and reset the blink and breath phase.
-  const live = useRef({ cfg, state, getLevel, getSpectrum, radii, shapeSeed });
-  live.current = { cfg, state, getLevel, getSpectrum, radii, shapeSeed };
+  const look = spec?.look ?? null;
+  const eyesOut = Boolean(crossed);
+  const live = useRef({
+    cfg,
+    state,
+    getSpectrum,
+    radii,
+    shapeSeed,
+    look,
+    crossed: eyesOut,
+    grow,
+  });
+  live.current = {
+    cfg,
+    state,
+    getSpectrum,
+    radii,
+    shapeSeed,
+    look,
+    crossed: eyesOut,
+    grow,
+  };
 
   useEffect(() => {
     bindPointer();
@@ -1050,20 +1130,18 @@ export function BotMark({
     // STATE_SHAPE values are targets, eased over about 0.6 s.
     const shape = { ...STATE_SHAPE.idle };
     const SHAPE_KEYS = Object.keys(shape) as (keyof StateShape)[];
-    // Three time scales: ~50 ms to catch a syllable, ~300 ms to know one just happened,
-    // ~1 s to know speech is ongoing.
+    // Two time scales: ~50 ms to catch a syllable, ~1 s to know speech is ongoing.
     let fastLvl = 0;
-    let midLvl = 0;
     let lvl = 0;
     let bright = 0.5;
     // Syllable-kicked spring; its own frequency caps how fast the mark can move.
     let bob = 0;
     let bobVel = 0;
     let lastOnset = 0;
-    const band = new Array<number>(MARK_BANDS).fill(0);
+    const band = new Array<number>(SPECTRUM_BANDS).fill(0);
     // Each harmonic rotates at its own speed, alternating direction, so the deformation
     // never settles into a standing wave.
-    const bandPhase = Array.from({ length: MARK_BANDS }, (_, k) => k * 1.7);
+    const bandPhase = Array.from({ length: SPECTRUM_BANDS }, (_, k) => k * 1.7);
     // Integrated, never `time * speed`: `churnSpeed` eases between states, and
     // phase = elapsed * speed would sweep the whole elapsed time on every speed change.
     let churnPhase = 0;
@@ -1097,7 +1175,7 @@ export function BotMark({
       // still; each band inside its own recent range moves with the words.
       const heard = voice.read(spec ?? SILENT, dt);
       let specSum = 0;
-      for (let k = 0; k < MARK_BANDS; k++) {
+      for (let k = 0; k < SPECTRUM_BANDS; k++) {
         const target = heard.bands[k];
         // Bands set the shape, so smooth hard; faster and small marks shimmer.
         band[k] += (target - band[k]) * c.bandEase;
@@ -1105,21 +1183,14 @@ export function BotMark({
         specSum += target;
       }
 
-      const given = live.current.getLevel?.();
-      const want = st === "speaking" ? clamp(given ?? heard.level, 0, 1) : 0;
+      const want = st === "speaking" ? clamp(heard.level, 0, 1) : 0;
 
       fastLvl += (want - fastLvl) * 0.3;
-      midLvl += (want - midLvl) * 0.055;
       lvl += (want - lvl) * 0.016;
 
-      // A syllable is a rise over the recent average: the follower's for a
-      // spectrum, this one's for a bare level. The gap must exceed the spring
+      // A syllable is the follower's onset. The gap must exceed the spring
       // period or kicks pile up into a tremble.
-      const syllable =
-        given === undefined
-          ? heard.onset > 0
-          : fastLvl > midLvl * 1.25 + 0.03 && fastLvl > 0.09;
-      if (syllable && now - lastOnset > 340) {
+      if (heard.onset > 0 && now - lastOnset > 340) {
         lastOnset = now;
         // Slower springs integrate each impulse longer, so scale the kick with stiffness.
         bobVel -= c.punch * Math.min(1, fastLvl * 1.6) * c.bobRate;
@@ -1133,8 +1204,8 @@ export function BotMark({
       // that changes per phoneme reads as flicker.
       if (specSum > 0.04) {
         let weighted = 0;
-        for (let k = 0; k < MARK_BANDS; k++) weighted += band[k] * k;
-        bright += (weighted / specSum / (MARK_BANDS - 1) - bright) * 0.04;
+        for (let k = 0; k < SPECTRUM_BANDS; k++) weighted += band[k] * k;
+        bright += (weighted / specSum / (SPECTRUM_BANDS - 1) - bright) * 0.04;
       } else {
         bright += (0.5 - bright) * 0.03;
       }
@@ -1172,14 +1243,6 @@ export function BotMark({
         }
       }
 
-      if (shadowRef.current) {
-        const swell = 0.5 - 0.5 * Math.cos(t * 0.55);
-        shadowRef.current.setAttribute(
-          "opacity",
-          f((shape.shadow * swell * c.shadow) / 100).toString(),
-        );
-      }
-
       if (lifeRef.current) {
         const amp = (c.breathe * shape.breathe) / 100;
         const swell = (lvl * c.pulse) / 300 - bob * 0.05;
@@ -1208,6 +1271,28 @@ export function BotMark({
         );
       }
 
+      // Paints run on plain seconds, not `c.speed`: they are surface, not mood.
+      const paintLook = live.current.look;
+      if (paintLook) {
+        const secs = now / 1000;
+        const grow = live.current.grow;
+        if (paintLook === "flow") {
+          // Slanted and sliding one run every 3.6 s, so the colours meet at no point.
+          paintRef.current?.setAttribute(
+            "gradientTransform",
+            `rotate(-35 ${CENTER} ${CENTER}) translate(${f(-((secs / 3.6) % 1) * spanOf(grow))} 0)`,
+          );
+        } else if (paintLook === "aurora") {
+          for (const [i, curtain] of CURTAINS.entries()) {
+            const e = 0.5 - 0.5 * Math.cos((secs / curtain.period) * TAU);
+            curtainRefs.current[i]?.setAttribute(
+              "transform",
+              `translate(${f(curtain.sway * e)} 0) translate(${curtain.cx} ${CURTAIN_Y}) skewX(${f(20 * e - 10)}) scale(1 ${f(1 + 0.18 * e)}) translate(${-curtain.cx} ${-CURTAIN_Y})`,
+            );
+          }
+        }
+      }
+
       // Eight bands folded into three, driving harmonics 2..4 only; higher harmonics on
       // an already bumpy silhouette read as noise.
       const lowE = (band[0] + band[1] + band[2]) / 3;
@@ -1241,18 +1326,14 @@ export function BotMark({
         const d = radiiToPath(next);
         headRef.current.setAttribute("d", d);
         clipRef.current?.setAttribute("d", d);
-        glowRef.current?.setAttribute("d", d);
-        haloHeadRef.current?.setAttribute("d", d);
-        shadowRef.current?.setAttribute("d", d);
-        rimRef.current?.setAttribute("d", d);
         maskHeadRef.current?.setAttribute("d", d);
       }
 
       if (eyesRef.current) {
         let tgx = 0;
         let tgy = 0;
-        if (c.follow && pointer.live && svg.current) {
-          const r = svg.current.getBoundingClientRect();
+        if (c.follow && pointer.live && svgRef.current) {
+          const r = svgRef.current.getBoundingClientRect();
           if (r.width > 0) {
             tgx =
               clamp(
@@ -1278,7 +1359,8 @@ export function BotMark({
             0.38 * Math.sin(t * 0.47 + phase * 2.1));
 
         let sy = 1;
-        if (blinkStart === 0) {
+        // Crossed-out eyes do not blink.
+        if (blinkStart === 0 && !live.current.crossed) {
           if (queuedBlink > 0 && now >= queuedBlink) {
             blinkStart = now;
             queuedBlink = 0;
@@ -1297,10 +1379,9 @@ export function BotMark({
             sy = 1 - Math.sin(Math.PI * p) * 0.94;
           }
         }
-        eyesRef.current.setAttribute(
-          "transform",
-          `translate(${f(gx + act.eyeX + shape.gazeX)} ${f(gy + drift + act.eyeY + shape.gazeY)}) translate(${CENTER} ${c.eyeY}) scale(1 ${sy.toFixed(3)}) translate(${-CENTER} ${-c.eyeY})`,
-        );
+        const eyesAt = `translate(${f(gx + act.eyeX + shape.gazeX)} ${f(gy + drift + act.eyeY + shape.gazeY)}) translate(${CENTER} ${c.eyeY}) scale(1 ${sy.toFixed(3)}) translate(${-CENTER} ${-c.eyeY})`;
+        eyesRef.current.setAttribute("transform", eyesAt);
+        inkEyesRef.current?.setAttribute("transform", eyesAt);
 
         // Each eye scales about its own center; scaling both together widens the gap instead.
         const eyeWid = act.eyeWid * (1 - lvl * 0.13) * shape.eyes;
@@ -1315,9 +1396,11 @@ export function BotMark({
           const tilt = i === 0 ? c.eyeTilt : c.eyeTilt + c.eyeSkew;
           const len = eyeLen.toFixed(3);
           const wid = eyeWid.toFixed(3);
-          ref.current.setAttribute(
+          const eyeAt = `translate(${f(cx)} ${c.eyeY}) rotate(${f(tilt)}) scale(${len} ${wid}) rotate(${f(-tilt)}) translate(${f(-cx)} ${-c.eyeY})`;
+          ref.current.setAttribute("transform", eyeAt);
+          (i === 0 ? inkEyeLRef : inkEyeRRef).current?.setAttribute(
             "transform",
-            `translate(${f(cx)} ${c.eyeY}) rotate(${f(tilt)}) scale(${len} ${wid}) rotate(${f(-tilt)}) translate(${f(-cx)} ${-c.eyeY})`,
+            eyeAt,
           );
         }
       }
@@ -1325,13 +1408,29 @@ export function BotMark({
 
     raf = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(raf);
-  }, [svg]);
+  }, []);
 
   const nAngle = (cfg.notifyAngle * Math.PI) / 180;
+  const ink = spec ? `url(#${paintId})` : "var(--fg)";
+  // Smaller marks get a thicker, wider X: at 18px the 112px stroke is under a pixel.
+  const xHalf = f(18 - 3 * grow);
+  const xStroke = f(22 - 9 * grow);
+  const eye = (d: string, cx: number, color: string) =>
+    eyesOut ? (
+      <path
+        d={`M${cx - xHalf} ${cfg.eyeY - xHalf}L${cx + xHalf} ${cfg.eyeY + xHalf}M${cx + xHalf} ${cfg.eyeY - xHalf}L${cx - xHalf} ${cfg.eyeY + xHalf}`}
+        fill="none"
+        stroke={color}
+        strokeWidth={xStroke}
+        strokeLinecap="round"
+      />
+    ) : (
+      <path d={d} fill={color} />
+    );
 
   return (
     <svg
-      ref={svg}
+      ref={svgRef}
       data-slot="bot-mark"
       aria-hidden="true"
       className={className}
@@ -1352,10 +1451,10 @@ export function BotMark({
             <g clipPath={`url(#${clipId})`}>
               <g ref={eyesRef}>
                 <g ref={eyeLRef}>
-                  <path d={eyeL} fill="#000" />
+                  {eye(eyeL, CENTER - cfg.eyeGap / 2, "#000")}
                 </g>
                 <g ref={eyeRRef}>
-                  <path d={eyeR} fill="#000" />
+                  {eye(eyeR, CENTER + cfg.eyeGap / 2, "#000")}
                 </g>
               </g>
             </g>
@@ -1369,114 +1468,107 @@ export function BotMark({
             )}
           </mask>
         )}
-        {cfg.shadow > 0 && (
-          <filter
-            id={shadowId}
-            x="-60%"
-            y="-60%"
-            width="220%"
-            height="220%"
-            colorInterpolationFilters="sRGB"
+        {spec && (
+          <linearGradient
+            ref={paintRef}
+            id={paintId}
+            {...paintAxis(spec.look, grow)}
           >
-            <feGaussianBlur stdDeviation={9} />
-          </filter>
+            {paintStops(spec).map((stop) => (
+              <stop
+                key={`${stop.offset}-${stop.color}`}
+                offset={stop.offset}
+                stopColor={stop.color}
+              />
+            ))}
+          </linearGradient>
         )}
-        {/* The aura is a halo around the silhouette, never a light behind it: the
-            eyes are holes cut out of the head, so anything drawn under it shines
-            straight through them and the face reads as hollow. */}
-        {cfg.glow > 0 && (
-          <mask
-            id={haloId}
-            maskUnits="userSpaceOnUse"
-            // The default region is the view box; the blur reaches past it.
+        {spec?.look === "aurora" && (
+          <filter
+            id={curtainId}
+            filterUnits="userSpaceOnUse"
             x={-PAD * 4}
             y={-PAD * 4}
             width={BOX + PAD * 8}
             height={BOX + PAD * 8}
-          >
-            <rect
-              x={-PAD * 4}
-              y={-PAD * 4}
-              width={BOX + PAD * 8}
-              height={BOX + PAD * 8}
-              fill="#fff"
-            />
-            <path ref={haloHeadRef} d={headPath} fill="#000" />
-          </mask>
-        )}
-        {cfg.glow > 0 && (
-          <filter
-            id={glowId}
-            x="-60%"
-            y="-60%"
-            width="220%"
-            height="220%"
             colorInterpolationFilters="sRGB"
           >
-            <feGaussianBlur stdDeviation={cfg.glow} />
+            <feGaussianBlur stdDeviation={f(curtainBlurOf(grow))} />
           </filter>
         )}
       </defs>
       <g ref={lifeRef}>
-        {cfg.shadow > 0 && (
-          <path
-            ref={shadowRef}
-            d={headPath}
-            fill="var(--fg)"
-            filter={`url(#${shadowId})`}
-            transform={`translate(0 ${12})`}
-            opacity={0}
-          />
-        )}
-        {cfg.glow > 0 && (
-          <path
-            ref={glowRef}
-            d={headPath}
-            fill={cfg.glowColor ?? "var(--fg)"}
-            filter={`url(#${glowId})`}
-            mask={`url(#${haloId})`}
-            opacity={cfg.glowStrength / 100}
-          />
-        )}
-        {/* Under the fill, stroked at double width so only the outer half shows. */}
-        {cfg.rim > 0 && (
+        {cfg.fill ? (
+          // Everything the body wears shares its one mask, so a paint's layers keep the eyes cut.
+          <g mask={`url(#${maskId})`}>
+            <path ref={headRef} d={headPath} fill={ink} />
+            {spec?.look === "aurora" && (
+              // Blurred on a layer wider than the face, so the curtains melt into the night
+              // while the mask keeps the outline and the eyes sharp.
+              <g filter={`url(#${curtainId})`}>
+                <rect
+                  x={-PAD * 4}
+                  y={-PAD * 4}
+                  width={BOX + PAD * 8}
+                  height={BOX + PAD * 8}
+                  fill={ink}
+                />
+                {CURTAINS.map((curtain, i) => (
+                  <ellipse
+                    key={curtain.cx}
+                    ref={(node) => {
+                      curtainRefs.current[i] = node;
+                    }}
+                    cx={curtain.cx}
+                    cy={CURTAIN_Y}
+                    rx={f(curtainRxOf(grow))}
+                    ry={138}
+                    fill={spec.colors[2 + i]}
+                    style={{ mixBlendMode: "screen" }}
+                  />
+                ))}
+              </g>
+            )}
+          </g>
+        ) : (
           <path
-            ref={rimRef}
+            ref={headRef}
             d={headPath}
             fill="none"
-            stroke={cfg.rimColor}
-            strokeWidth={cfg.rim * 2}
+            stroke={ink}
+            strokeWidth={cfg.strokeWidth}
             strokeLinejoin="round"
           />
         )}
-        <path
-          ref={headRef}
-          d={headPath}
-          fill={cfg.fill ? "var(--fg)" : "none"}
-          stroke={cfg.fill ? "none" : "var(--fg)"}
-          strokeWidth={cfg.fill ? 0 : cfg.strokeWidth}
-          strokeLinejoin="round"
-          mask={cfg.fill ? `url(#${maskId})` : undefined}
-        />
+        {cfg.fill && edge === "dark" && (
+          // Eye holes show the page, and a dark body on a dark page swallows them.
+          <g clipPath={`url(#${clipId})`} opacity={0.92}>
+            <g ref={inkEyesRef}>
+              <g ref={inkEyeLRef}>
+                {eye(eyeL, CENTER - cfg.eyeGap / 2, "#fff")}
+              </g>
+              <g ref={inkEyeRRef}>
+                {eye(eyeR, CENTER + cfg.eyeGap / 2, "#fff")}
+              </g>
+            </g>
+          </g>
+        )}
         {/* Outlined marks have no silhouette to cut into, so the eyes are drawn. */}
         {!cfg.fill && (
           <g clipPath={`url(#${clipId})`}>
             <g ref={eyesRef}>
-              <g ref={eyeLRef}>
-                <path d={eyeL} fill="var(--fg)" />
-              </g>
-              <g ref={eyeRRef}>
-                <path d={eyeR} fill="var(--fg)" />
-              </g>
+              <g ref={eyeLRef}>{eye(eyeL, CENTER - cfg.eyeGap / 2, ink)}</g>
+              <g ref={eyeRRef}>{eye(eyeR, CENTER + cfg.eyeGap / 2, ink)}</g>
             </g>
           </g>
         )}
         {notifying && (
+          // The dot waits on the user, so it wears amber in NavBadge's shades.
           <circle
             cx={f(CENTER + Math.cos(nAngle) * cfg.notifyDist)}
             cy={f(CENTER + Math.sin(nAngle) * cfg.notifyDist)}
             r={cfg.notifyR}
-            fill={cfg.notifyColor}
+            className="fill-amber-600 dark:fill-amber-400"
           />
         )}
       </g>