git-hash-art 0.10.1 → 0.12.0

package/src/lib/render.ts

@@ -38,8 +38,7 @@ import {
     drawMirroredShape,
     pickMirrorAxis,
     pickBlendMode,
-    pickRenderStyle,
-    type RenderStyle
+    pickRenderStyle, type RenderStyle
 } from "./canvas/draw";
 import { shapes } from "./canvas/shapes";
 import {
@@ -50,7 +49,41 @@ import {
 } from "./canvas/shapes/affinity";
 import { createRng, seedFromHash, createSimplexNoise, createFBM } from "./utils";
 import { DEFAULT_CONFIG, type GenerationConfig } from "../types";
-import { selectArchetype, type BackgroundStyle } from "./archetypes";
+import { selectArchetype, type BackgroundStyle, type CompositionMode } from "./archetypes";
+
+// ── Render style cost weights (normalized: fill-and-stroke = 1) ─────
+// Based on benchmark measurements. Used by the complexity budget to
+// cap total rendering work and downgrade expensive styles when needed.
+const RENDER_STYLE_COST: Record<RenderStyle, number> = {
+  "fill-and-stroke": 1,
+  "fill-only":       0.5,
+  "stroke-only":     1,
+  "double-stroke":   1.5,
+  "dashed":          1,
+  "watercolor":      7,
+  "hatched":         3,
+  "incomplete":      1,
+  "stipple":         90,
+  "stencil":         2,
+  "noise-grain":     400,
+  "wood-grain":      10,
+  "marble-vein":     4,
+  "fabric-weave":    6,
+  "hand-drawn":      5,
+};
+
+function downgradeRenderStyle(style: RenderStyle): RenderStyle {
+  switch (style) {
+    case "noise-grain": return "hatched";
+    case "stipple":     return "dashed";
+    case "wood-grain":  return "hatched";
+    case "watercolor":  return "fill-and-stroke";
+    case "fabric-weave": return "hatched";
+    case "hand-drawn":  return "fill-and-stroke";
+    case "marble-vein": return "stroke-only";
+    default:            return style;
+  }
+}
 
 
 // ── Shape categories for weighted selection (legacy fallback) ───────
@@ -69,15 +102,7 @@ const SACRED_SHAPES = [
 
 // ── Composition modes ───────────────────────────────────────────────
 
-type CompositionMode =
-  | "radial"
-  | "flow-field"
-  | "spiral"
-  | "grid-subdivision"
-  | "clustered"
-  | "golden-spiral";
-
-const COMPOSITION_MODES: CompositionMode[] = [
+const ALL_COMPOSITION_MODES: CompositionMode[] = [
   "radial",
   "flow-field",
   "spiral",
@@ -193,7 +218,80 @@ function isInVoidZone(
   return false;
 }
 
-// ── Helper: density check ───────────────────────────────────────────
+// ── Spatial hash grid for O(1) density checks and nearest-neighbor ──
+
+class SpatialGrid {
+  private cells: Map<string, Array<{ x: number; y: number; size: number; shape: string }>>;
+  private cellSize: number;
+
+  constructor(cellSize: number) {
+    this.cells = new Map();
+    this.cellSize = cellSize;
+  }
+
+  private key(cx: number, cy: number): string {
+    return `${cx},${cy}`;
+  }
+
+  insert(item: { x: number; y: number; size: number; shape: string }): void {
+    const cx = Math.floor(item.x / this.cellSize);
+    const cy = Math.floor(item.y / this.cellSize);
+    const k = this.key(cx, cy);
+    const cell = this.cells.get(k);
+    if (cell) cell.push(item);
+    else this.cells.set(k, [item]);
+  }
+
+  /** Count items within radius of (x, y) */
+  countNear(x: number, y: number, radius: number): number {
+    const r2 = radius * radius;
+    const minCx = Math.floor((x - radius) / this.cellSize);
+    const maxCx = Math.floor((x + radius) / this.cellSize);
+    const minCy = Math.floor((y - radius) / this.cellSize);
+    const maxCy = Math.floor((y + radius) / this.cellSize);
+    let count = 0;
+    for (let cx = minCx; cx <= maxCx; cx++) {
+      for (let cy = minCy; cy <= maxCy; cy++) {
+        const cell = this.cells.get(this.key(cx, cy));
+        if (!cell) continue;
+        for (const p of cell) {
+          const dx = x - p.x;
+          const dy = y - p.y;
+          if (dx * dx + dy * dy < r2) count++;
+        }
+      }
+    }
+    return count;
+  }
+
+  /** Find nearest item to (x, y) */
+  findNearest(x: number, y: number, searchRadius: number): { x: number; y: number; size: number } | null {
+    const minCx = Math.floor((x - searchRadius) / this.cellSize);
+    const maxCx = Math.floor((x + searchRadius) / this.cellSize);
+    const minCy = Math.floor((y - searchRadius) / this.cellSize);
+    const maxCy = Math.floor((y + searchRadius) / this.cellSize);
+    let nearest: { x: number; y: number; size: number } | null = null;
+    let bestDist2 = Infinity;
+    for (let cx = minCx; cx <= maxCx; cx++) {
+      for (let cy = minCy; cy <= maxCy; cy++) {
+        const cell = this.cells.get(this.key(cx, cy));
+        if (!cell) continue;
+        for (const p of cell) {
+          const dx = x - p.x;
+          const dy = y - p.y;
+          const d2 = dx * dx + dy * dy;
+          if (d2 > 0 && d2 < bestDist2) {
+            bestDist2 = d2;
+            nearest = p;
+          }
+        }
+      }
+    }
+    return nearest;
+  }
+}
+
+// ── Helper: density check (legacy wrapper) ──────────────────────────
 
 function localDensity(
   x: number,
@@ -498,44 +596,45 @@ export function renderHashArt(
     const patternColor = hexWithAlpha(colorHierarchy.dominant, 0.15);
 
     if (bgPatternRoll < 0.2) {
-      // Dot grid
+      // Dot grid — batched into a single path
       const dotSpacing = Math.max(8, Math.min(width, height) * (0.015 + rng() * 0.015));
       const dotR = dotSpacing * 0.08;
       ctx.globalAlpha = patternOpacity;
       ctx.fillStyle = patternColor;
+      ctx.beginPath();
       for (let px = 0; px < width; px += dotSpacing) {
         for (let py = 0; py < height; py += dotSpacing) {
-          ctx.beginPath();
+          ctx.moveTo(px + dotR, py);
           ctx.arc(px, py, dotR, 0, Math.PI * 2);
-          ctx.fill();
         }
       }
+      ctx.fill();
     } else if (bgPatternRoll < 0.4) {
-      // Diagonal lines
+      // Diagonal lines — batched into a single path
       const lineSpacing = Math.max(6, Math.min(width, height) * (0.02 + rng() * 0.02));
       ctx.globalAlpha = patternOpacity;
       ctx.strokeStyle = patternColor;
       ctx.lineWidth = 0.5 * scaleFactor;
       const diag = Math.hypot(width, height);
+      ctx.beginPath();
       for (let d = -diag; d < diag; d += lineSpacing) {
-        ctx.beginPath();
         ctx.moveTo(d, 0);
         ctx.lineTo(d + height, height);
-        ctx.stroke();
       }
+      ctx.stroke();
     } else {
-      // Tessellation — hexagonal grid of tiny shapes
+      // Tessellation — hexagonal grid, batched into a single path
       const tessSize = Math.max(10, Math.min(width, height) * (0.025 + rng() * 0.02));
       const tessH = tessSize * Math.sqrt(3);
       ctx.globalAlpha = patternOpacity * 0.7;
       ctx.strokeStyle = patternColor;
       ctx.lineWidth = 0.4 * scaleFactor;
+      ctx.beginPath();
       for (let row = 0; row * tessH < height + tessH; row++) {
         const offsetX = (row % 2) * tessSize * 0.75;
         for (let col = 0; col * tessSize * 1.5 < width + tessSize * 1.5; col++) {
           const hx = col * tessSize * 1.5 + offsetX;
           const hy = row * tessH;
-          ctx.beginPath();
           for (let s = 0; s < 6; s++) {
             const angle = (Math.PI / 3) * s - Math.PI / 6;
             const vx = hx + Math.cos(angle) * tessSize * 0.5;
@@ -544,17 +643,18 @@ export function renderHashArt(
             else ctx.lineTo(vx, vy);
           }
           ctx.closePath();
-          ctx.stroke();
         }
       }
+      ctx.stroke();
     }
     ctx.restore();
   }
   ctx.globalCompositeOperation = "source-over";
 
-  // ── 2. Composition mode ────────────────────────────────────────
-  const compositionMode =
-    COMPOSITION_MODES[Math.floor(rng() * COMPOSITION_MODES.length)];
+  // ── 2. Composition mode — archetype-aware selection ──────────────
+  const compositionMode: CompositionMode = rng() < 0.7
+    ? archetype.preferredCompositions[Math.floor(rng() * archetype.preferredCompositions.length)]
+    : ALL_COMPOSITION_MODES[Math.floor(rng() * ALL_COMPOSITION_MODES.length)];
 
   // ── 2b. Symmetry mode — ~25% of hashes trigger mirroring ──────
   type SymmetryMode = "none" | "bilateral-x" | "bilateral-y" | "quad";
@@ -564,7 +664,7 @@ export function renderHashArt(
     symRoll < 0.20 ? "bilateral-y" :
     symRoll < 0.25 ? "quad" : "none";
 
-  // ── 3. Focal points + void zones ───────────────────────────────
+  // ── 3. Focal points + void zones (archetype-aware) ───────────────
   const THIRDS_POINTS = [
     { x: 1 / 3, y: 1 / 3 },
     { x: 2 / 3, y: 1 / 3 },
@@ -590,14 +690,30 @@ export function renderHashArt(
     }
   }
 
-  const numVoids = Math.floor(rng() * 2) + 1;
+  // Archetype-aware void zones: dense archetypes get fewer/no voids,
+  // minimal archetypes get golden-ratio positioned voids
+  const PHI = (1 + Math.sqrt(5)) / 2;
+  const isMinimalArchetype = archetype.gridSize <= 3;
+  const isDenseArchetype = archetype.gridSize >= 8;
+  const numVoids = isDenseArchetype ? 0 : (Math.floor(rng() * 2) + 1);
   const voidZones: Array<{ x: number; y: number; radius: number }> = [];
   for (let v = 0; v < numVoids; v++) {
-    voidZones.push({
-      x: width * (0.15 + rng() * 0.7),
-      y: height * (0.15 + rng() * 0.7),
-      radius: Math.min(width, height) * (0.06 + rng() * 0.1),
-    });
+    if (isMinimalArchetype) {
+      // Place voids at golden-ratio positions for intentional negative space
+      const gx = (v === 0) ? 1 / PHI : 1 - 1 / PHI;
+      const gy = (v === 0) ? 1 - 1 / PHI : 1 / PHI;
+      voidZones.push({
+        x: width * (gx + (rng() - 0.5) * 0.05),
+        y: height * (gy + (rng() - 0.5) * 0.05),
+        radius: Math.min(width, height) * (0.08 + rng() * 0.08),
+      });
+    } else {
+      voidZones.push({
+        x: width * (0.15 + rng() * 0.7),
+        y: height * (0.15 + rng() * 0.7),
+        radius: Math.min(width, height) * (0.06 + rng() * 0.1),
+      });
+    }
   }
 
   function applyFocalBias(rx: number, ry: number): [number, number] {
@@ -624,23 +740,27 @@ export function renderHashArt(
     ctx.arc(zone.x, zone.y, zone.radius, 0, Math.PI * 2);
     ctx.stroke();
 
-    // ~50% chance: scatter tiny dots inside the void
+    // ~50% chance: scatter tiny dots inside the void — batched into single path
     if (rng() < 0.5) {
       const dotCount = 3 + Math.floor(rng() * 6);
       ctx.globalAlpha = 0.06 + rng() * 0.04;
       ctx.fillStyle = hexWithAlpha(colorHierarchy.secondary, 0.15);
+      ctx.beginPath();
       for (let d = 0; d < dotCount; d++) {
         const angle = rng() * Math.PI * 2;
         const dist = rng() * zone.radius * 0.7;
         const dotR = (1 + rng() * 3) * scaleFactor;
-        ctx.beginPath();
+        ctx.moveTo(
+          zone.x + Math.cos(angle) * dist + dotR,
+          zone.y + Math.sin(angle) * dist,
+        );
         ctx.arc(
           zone.x + Math.cos(angle) * dist,
           zone.y + Math.sin(angle) * dist,
           dotR, 0, Math.PI * 2,
         );
-        ctx.fill();
       }
+      ctx.fill();
     }
 
     // ~30% chance: thin concentric ring inside
@@ -681,6 +801,10 @@ export function renderHashArt(
   // Track all placed shapes for density checks and connecting curves
   const shapePositions: Array<{ x: number; y: number; size: number; shape: string }> = [];
 
+  // Spatial grid for O(1) density and nearest-neighbor lookups
+  const densityCheckRadius = Math.min(width, height) * 0.08;
+  const spatialGrid = new SpatialGrid(densityCheckRadius);
+
   // Hero avoidance radius — shapes near the hero orient toward it
   let heroCenter: { x: number; y: number; size: number } | null = null;
 
@@ -727,13 +851,35 @@ export function renderHashArt(
 
     heroCenter = { x: heroFocal.x, y: heroFocal.y, size: heroSize };
     shapePositions.push({ x: heroFocal.x, y: heroFocal.y, size: heroSize, shape: heroShape });
+    spatialGrid.insert({ x: heroFocal.x, y: heroFocal.y, size: heroSize, shape: heroShape });
   }
 
 
   // ── 5. Shape layers ────────────────────────────────────────────
-  const densityCheckRadius = Math.min(width, height) * 0.08;
   const maxLocalDensity = Math.ceil(shapesPerLayer * 0.15);
 
+  // ── Complexity budget — caps total rendering work ──────────────
+  // Budget scales with pixel area so larger canvases get proportionally
+  // more headroom.  The multiplier extras (glazing, echoes, nesting,
+  // constellations, rhythm) are gated behind the budget; when it runs
+  // low they are skipped.  When it's exhausted, expensive render styles
+  // are downgraded to cheaper alternatives.
+  //
+  // RNG values are always consumed even when skipping, so the
+  // deterministic sequence for shapes that *do* render is preserved.
+  const pixelArea = width * height;
+  const BUDGET_PER_MEGAPIXEL = 6000; // cost units per 1M pixels
+  let complexityBudget = (pixelArea / 1_000_000) * BUDGET_PER_MEGAPIXEL;
+  const totalBudget = complexityBudget;
+  const budgetForExtras = complexityBudget * 0.25; // reserve 25% for multiplier extras
+  let extrasSpent = 0;
+
+  // Hard cap on clip-heavy render styles (stipple, noise-grain).
+  // These generate O(size²) fillRect calls per shape and dominate
+  // worst-case render time.  Cap scales with pixel area.
+  const MAX_CLIP_HEAVY_SHAPES = Math.max(4, Math.floor(8 * (pixelArea / 1_000_000)));
+  let clipHeavyCount = 0;
+
   for (let layer = 0; layer < layers; layer++) {
     const layerRatio = layers > 1 ? layer / (layers - 1) : 0;
     const numShapes =
@@ -792,7 +938,7 @@ export function renderHashArt(
       if (isInVoidZone(x, y, voidZones)) {
         if (rng() < 0.85) continue;
       }
-      if (localDensity(x, y, shapePositions, densityCheckRadius) > maxLocalDensity) {
+      if (spatialGrid.countNear(x, y, densityCheckRadius) > maxLocalDensity) {
         if (rng() < 0.6) continue;
       }
 
@@ -870,7 +1016,30 @@ export function renderHashArt(
 
       // Organic edge jitter — applied via watercolor style on ~15% of shapes
       const useOrganicEdges = rng() < 0.15 && shapeRenderStyle === "fill-and-stroke";
-      const finalRenderStyle = useOrganicEdges ? "watercolor" as RenderStyle : shapeRenderStyle;
+      let finalRenderStyle = useOrganicEdges ? "watercolor" as RenderStyle : shapeRenderStyle;
+
+      // Budget check: downgrade expensive styles proportionally —
+      // the more expensive the style, the earlier it gets downgraded.
+      // noise-grain (400) downgrades when budget < 20% remaining,
+      // stipple (90) when < 82%, wood-grain (10) when < 98%.
+      let styleCost = RENDER_STYLE_COST[finalRenderStyle] ?? 1;
+      if (styleCost > 3) {
+        const downgradeThreshold = Math.min(0.85, styleCost / 500);
+        if (complexityBudget < totalBudget * (1 - downgradeThreshold)) {
+          finalRenderStyle = downgradeRenderStyle(finalRenderStyle);
+          styleCost = RENDER_STYLE_COST[finalRenderStyle] ?? 1;
+        }
+      }
+      // Hard cap: clip-heavy styles (stipple, noise-grain) are limited
+      // to MAX_CLIP_HEAVY_SHAPES total across the entire render.
+      if ((finalRenderStyle === "stipple" || finalRenderStyle === "noise-grain") &&
+          clipHeavyCount >= MAX_CLIP_HEAVY_SHAPES) {
+        finalRenderStyle = downgradeRenderStyle(finalRenderStyle);
+        styleCost = RENDER_STYLE_COST[finalRenderStyle] ?? 1;
+      }
+      if (finalRenderStyle === "stipple" || finalRenderStyle === "noise-grain") {
+        clipHeavyCount++;
+      }
 
       // Consistent light direction — subtle shadow offset
       const shadowDist = hasGlow ? 0 : (size * 0.02);
@@ -881,17 +1050,11 @@ export function renderHashArt(
       let finalX = x;
       let finalY = y;
       if (shapePositions.length > 0 && rng() < 0.25) {
-        // Find nearest placed shape
-        let nearestDist = Infinity;
-        let nearestPos: { x: number; y: number; size: number } | null = null;
-        for (const sp of shapePositions) {
-          const d = Math.hypot(x - sp.x, y - sp.y);
-          if (d < nearestDist && d > 0) {
-            nearestDist = d;
-            nearestPos = sp;
-          }
-        }
+        // Use spatial grid for O(1) nearest-neighbor lookup
+        const searchRadius = adjustedMaxSize * 3;
+        const nearestPos = spatialGrid.findNearest(x, y, searchRadius);
         if (nearestPos) {
+          const nearestDist = Math.hypot(x - nearestPos.x, y - nearestPos.y);
           // Target distance: edges kissing (sum of half-sizes)
           const targetDist = (size + nearestPos.size) * 0.5;
           if (nearestDist > targetDist * 0.5 && nearestDist < targetDist * 3) {
@@ -935,58 +1098,73 @@ export function renderHashArt(
           mirrorAxis: mirrorAxis!,
           mirrorGap: size * (0.1 + rng() * 0.3),
         });
+        complexityBudget -= styleCost * 2; // mirrored = 2 shapes
       } else {
         enhanceShapeGeneration(ctx, shape, finalX, finalY, shapeConfig);
+        complexityBudget -= styleCost;
       }
 
+      // ── Extras budget gate — skip multiplier sections when over budget ──
+      const extrasAllowed = extrasSpent < budgetForExtras;
+
       // ── Glazing — luminous multi-pass transparency on ~20% of shapes ──
       if (rng() < 0.2 && size > adjustedMinSize * 2) {
         const glazePasses = 2 + Math.floor(rng() * 2);
-        for (let g = 0; g < glazePasses; g++) {
-          const glazeScale = 1 - (g + 1) * 0.12; // progressively smaller
-          const glazeAlpha = 0.08 + g * 0.04; // progressively more opaque toward center
-          ctx.globalAlpha = glazeAlpha;
-          enhanceShapeGeneration(ctx, shape, finalX, finalY, {
-            fillColor: hexWithAlpha(fillColor, 0.15 + g * 0.1),
-            strokeColor: "rgba(0,0,0,0)",
-            strokeWidth: 0,
-            size: size * glazeScale,
-            rotation,
-            proportionType: "GOLDEN_RATIO",
-            renderStyle: "fill-only",
-            rng,
-          });
+        if (extrasAllowed) {
+          for (let g = 0; g < glazePasses; g++) {
+            const glazeScale = 1 - (g + 1) * 0.12;
+            const glazeAlpha = 0.08 + g * 0.04;
+            ctx.globalAlpha = glazeAlpha;
+            enhanceShapeGeneration(ctx, shape, finalX, finalY, {
+              fillColor: hexWithAlpha(fillColor, 0.15 + g * 0.1),
+              strokeColor: "rgba(0,0,0,0)",
+              strokeWidth: 0,
+              size: size * glazeScale,
+              rotation,
+              proportionType: "GOLDEN_RATIO",
+              renderStyle: "fill-only",
+              rng,
+            });
+          }
+          extrasSpent += glazePasses;
         }
+        // RNG consumed by glazePasses calculation above regardless
       }
 
       shapePositions.push({ x: finalX, y: finalY, size, shape });
+      spatialGrid.insert({ x: finalX, y: finalY, size, shape });
 
       // ── 5c. Size echo — large shapes spawn trailing smaller copies ──
       if (size > adjustedMaxSize * 0.5 && rng() < 0.2) {
         const echoCount = 2 + Math.floor(rng() * 2);
         const echoAngle = rng() * Math.PI * 2;
-        for (let e = 0; e < echoCount; e++) {
-          const echoScale = 0.3 - e * 0.08;
-          const echoDist = size * (0.6 + e * 0.4);
-          const echoX = finalX + Math.cos(echoAngle) * echoDist;
-          const echoY = finalY + Math.sin(echoAngle) * echoDist;
-          const echoSize = size * Math.max(0.1, echoScale);
-
-          if (echoX < 0 || echoX > width || echoY < 0 || echoY > height) continue;
-
-          ctx.globalAlpha = layerOpacity * (0.4 - e * 0.1);
-          enhanceShapeGeneration(ctx, shape, echoX, echoY, {
-            fillColor: hexWithAlpha(fillColor, fillAlpha * 0.6),
-            strokeColor: hexWithAlpha(strokeColor, 0.4),
-            strokeWidth: strokeWidth * 0.6,
-            size: echoSize,
-            rotation: rotation + (e + 1) * 15,
-            proportionType: "GOLDEN_RATIO",
-            renderStyle: finalRenderStyle,
-            rng,
-          });
-          shapePositions.push({ x: echoX, y: echoY, size: echoSize, shape });
+        if (extrasAllowed) {
+          for (let e = 0; e < echoCount; e++) {
+            const echoScale = 0.3 - e * 0.08;
+            const echoDist = size * (0.6 + e * 0.4);
+            const echoX = finalX + Math.cos(echoAngle) * echoDist;
+            const echoY = finalY + Math.sin(echoAngle) * echoDist;
+            const echoSize = size * Math.max(0.1, echoScale);
+
+            if (echoX < 0 || echoX > width || echoY < 0 || echoY > height) continue;
+
+            ctx.globalAlpha = layerOpacity * (0.4 - e * 0.1);
+            enhanceShapeGeneration(ctx, shape, echoX, echoY, {
+              fillColor: hexWithAlpha(fillColor, fillAlpha * 0.6),
+              strokeColor: hexWithAlpha(strokeColor, 0.4),
+              strokeWidth: strokeWidth * 0.6,
+              size: echoSize,
+              rotation: rotation + (e + 1) * 15,
+              proportionType: "GOLDEN_RATIO",
+              renderStyle: finalRenderStyle,
+              rng,
+            });
+            shapePositions.push({ x: echoX, y: echoY, size: echoSize, shape });
+            spatialGrid.insert({ x: echoX, y: echoY, size: echoSize, shape });
+          }
+          extrasSpent += echoCount * styleCost;
         }
+        // RNG for echoCount + echoAngle consumed above regardless
       }
 
       // ── 5d. Recursive nesting ──────────────────────────────────
@@ -995,36 +1173,51 @@ export function renderHashArt(
       const nestingChance = 0.15 + focalProximity * 0.15; // 15-30% near focal
       if (size > adjustedMaxSize * 0.4 && rng() < nestingChance) {
         const innerCount = 1 + Math.floor(rng() * 3);
-        for (let n = 0; n < innerCount; n++) {
-          // Pick inner shape from palette affinities
-          const innerSizeFraction = (size * 0.25) / adjustedMaxSize;
-          const innerShape = pickShapeFromPalette(shapePalette, rng, innerSizeFraction);
-          const innerSize = size * (0.15 + rng() * 0.25);
-          const innerOffX = (rng() - 0.5) * size * 0.4;
-          const innerOffY = (rng() - 0.5) * size * 0.4;
-          const innerRot = rng() * 360;
-          const innerFill = hexWithAlpha(
-            jitterColorHSL(pickHierarchyColor(colorHierarchy, rng), rng, 10, 0.1),
-            0.3 + rng() * 0.4,
-          );
-
-          ctx.globalAlpha = layerOpacity * 0.7;
-          enhanceShapeGeneration(
-            ctx,
-            innerShape,
-            finalX + innerOffX,
-            finalY + innerOffY,
-            {
-              fillColor: innerFill,
-              strokeColor: hexWithAlpha(strokeColor, 0.5),
-              strokeWidth: strokeWidth * 0.6,
-              size: innerSize,
-              rotation: innerRot,
-              proportionType: "GOLDEN_RATIO",
-              renderStyle: pickStyleForShape(innerShape, layerRenderStyle, rng) as RenderStyle,
-              rng,
-            },
-          );
+        if (extrasAllowed) {
+          for (let n = 0; n < innerCount; n++) {
+            // Pick inner shape from palette affinities
+            const innerSizeFraction = (size * 0.25) / adjustedMaxSize;
+            const innerShape = pickShapeFromPalette(shapePalette, rng, innerSizeFraction);
+            const innerSize = size * (0.15 + rng() * 0.25);
+            const innerOffX = (rng() - 0.5) * size * 0.4;
+            const innerOffY = (rng() - 0.5) * size * 0.4;
+            const innerRot = rng() * 360;
+            const innerFill = hexWithAlpha(
+              jitterColorHSL(pickHierarchyColor(colorHierarchy, rng), rng, 10, 0.1),
+              0.3 + rng() * 0.4,
+            );
+
+            let innerStyle = pickStyleForShape(innerShape, layerRenderStyle, rng) as RenderStyle;
+            // Apply clip-heavy cap to nested shapes too
+            if ((innerStyle === "stipple" || innerStyle === "noise-grain") &&
+                clipHeavyCount >= MAX_CLIP_HEAVY_SHAPES) {
+              innerStyle = downgradeRenderStyle(innerStyle);
+            }
+            if (innerStyle === "stipple" || innerStyle === "noise-grain") clipHeavyCount++;
+            ctx.globalAlpha = layerOpacity * 0.7;
+            enhanceShapeGeneration(
+              ctx,
+              innerShape,
+              finalX + innerOffX,
+              finalY + innerOffY,
+              {
+                fillColor: innerFill,
+                strokeColor: hexWithAlpha(strokeColor, 0.5),
+                strokeWidth: strokeWidth * 0.6,
+                size: innerSize,
+                rotation: innerRot,
+                proportionType: "GOLDEN_RATIO",
+                renderStyle: innerStyle,
+                rng,
+              },
+            );
+            extrasSpent += RENDER_STYLE_COST[innerStyle] ?? 1;
+          }
+        } else {
+          // Drain RNG to keep determinism — each nested shape consumes ~8 rng calls
+          for (let n = 0; n < innerCount; n++) {
+            rng(); rng(); rng(); rng(); rng(); rng(); rng(); rng();
+          }
         }
       }
 
@@ -1034,41 +1227,109 @@ export function renderHashArt(
         const constellation = CONSTELLATIONS[Math.floor(rng() * CONSTELLATIONS.length)];
         const members = constellation.build(rng, size);
         const groupRotation = rng() * Math.PI * 2;
-        const cosR = Math.cos(groupRotation);
-        const sinR = Math.sin(groupRotation);
-
-        for (const member of members) {
-          // Rotate the group offset by the group rotation
-          const mx = finalX + member.dx * cosR - member.dy * sinR;
-          const my = finalY + member.dx * sinR + member.dy * cosR;
 
-          if (mx < 0 || mx > width || my < 0 || my > height) continue;
-
-          const memberFill = hexWithAlpha(
-            jitterColorHSL(pickHierarchyColor(colorHierarchy, rng), rng, 8, 0.06),
-            fillAlpha * 0.8,
-          );
-          const memberStroke = enforceContrast(
-            jitterColorHSL(strokeBase, rng, 5, 0.04), bgLum,
-          );
+        if (extrasAllowed) {
+          const cosR = Math.cos(groupRotation);
+          const sinR = Math.sin(groupRotation);
+
+          for (const member of members) {
+            // Rotate the group offset by the group rotation
+            const mx = finalX + member.dx * cosR - member.dy * sinR;
+            const my = finalY + member.dx * sinR + member.dy * cosR;
+
+            if (mx < 0 || mx > width || my < 0 || my > height) continue;
+
+            const memberFill = hexWithAlpha(
+              jitterColorHSL(pickHierarchyColor(colorHierarchy, rng), rng, 8, 0.06),
+              fillAlpha * 0.8,
+            );
+            const memberStroke = enforceContrast(
+              jitterColorHSL(strokeBase, rng, 5, 0.04), bgLum,
+            );
+
+            ctx.globalAlpha = layerOpacity * 0.6;
+            // Use the member's shape if available, otherwise fall back to palette
+            const memberShape = shapeNames.includes(member.shape)
+              ? member.shape
+              : pickShapeFromPalette(shapePalette, rng, member.size / adjustedMaxSize);
+
+            let memberStyle = pickStyleForShape(memberShape, layerRenderStyle, rng) as RenderStyle;
+            // Apply clip-heavy cap to constellation members too
+            if ((memberStyle === "stipple" || memberStyle === "noise-grain") &&
+                clipHeavyCount >= MAX_CLIP_HEAVY_SHAPES) {
+              memberStyle = downgradeRenderStyle(memberStyle);
+            }
+            if (memberStyle === "stipple" || memberStyle === "noise-grain") clipHeavyCount++;
+            enhanceShapeGeneration(ctx, memberShape, mx, my, {
+              fillColor: memberFill,
+              strokeColor: memberStroke,
+              strokeWidth: strokeWidth * 0.7,
+              size: member.size,
+              rotation: member.rotation + (groupRotation * 180) / Math.PI,
+              proportionType: "GOLDEN_RATIO",
+              renderStyle: memberStyle,
+              rng,
+            });
+            shapePositions.push({ x: mx, y: my, size: member.size, shape: memberShape });
+            spatialGrid.insert({ x: mx, y: my, size: member.size, shape: memberShape });
+            extrasSpent += RENDER_STYLE_COST[memberStyle] ?? 1;
+          }
+        } else {
+          // Drain RNG — each member consumes ~6 rng calls for colors/style
+          for (let m = 0; m < members.length; m++) {
+            rng(); rng(); rng(); rng(); rng(); rng();
+          }
+        }
+      }
 
-          ctx.globalAlpha = layerOpacity * 0.6;
-          // Use the member's shape if available, otherwise fall back to palette
-          const memberShape = shapeNames.includes(member.shape)
-            ? member.shape
-            : pickShapeFromPalette(shapePalette, rng, member.size / adjustedMaxSize);
-
-          enhanceShapeGeneration(ctx, memberShape, mx, my, {
-            fillColor: memberFill,
-            strokeColor: memberStroke,
-            strokeWidth: strokeWidth * 0.7,
-            size: member.size,
-            rotation: member.rotation + (groupRotation * 180) / Math.PI,
-            proportionType: "GOLDEN_RATIO",
-            renderStyle: pickStyleForShape(memberShape, layerRenderStyle, rng) as RenderStyle,
-            rng,
-          });
-          shapePositions.push({ x: mx, y: my, size: member.size, shape: memberShape });
+      // ── 5f. Rhythm placement — deliberate geometric progressions ──
+      // ~12% of medium-large shapes spawn a rhythmic sequence
+      if (size > adjustedMaxSize * 0.25 && rng() < 0.12) {
+        const rhythmCount = 3 + Math.floor(rng() * 4); // 3-6 shapes
+        const rhythmAngle = rng() * Math.PI * 2;
+        const rhythmSpacing = size * (0.8 + rng() * 0.6);
+        const rhythmDecay = 0.7 + rng() * 0.15; // size multiplier per step
+        const rhythmShape = shape; // same shape for visual rhythm
+
+        if (extrasAllowed) {
+          let rhythmSize = size * 0.6;
+          for (let r = 0; r < rhythmCount; r++) {
+            const rx = finalX + Math.cos(rhythmAngle) * rhythmSpacing * (r + 1);
+            const ry = finalY + Math.sin(rhythmAngle) * rhythmSpacing * (r + 1);
+
+            if (rx < 0 || rx > width || ry < 0 || ry > height) break;
+            if (isInVoidZone(rx, ry, voidZones)) break;
+
+            rhythmSize *= rhythmDecay;
+            if (rhythmSize < adjustedMinSize) break;
+
+            const rhythmAlpha = layerOpacity * (0.6 - r * 0.08);
+            ctx.globalAlpha = Math.max(0.1, rhythmAlpha);
+
+            const rhythmFill = hexWithAlpha(
+              jitterColorHSL(pickHierarchyColor(layerHierarchy, rng), rng, 5, 0.04),
+              fillAlpha * 0.7,
+            );
+
+            enhanceShapeGeneration(ctx, rhythmShape, rx, ry, {
+              fillColor: rhythmFill,
+              strokeColor: hexWithAlpha(strokeColor, 0.5),
+              strokeWidth: strokeWidth * 0.7,
+              size: rhythmSize,
+              rotation: rotation + (r + 1) * 12,
+              proportionType: "GOLDEN_RATIO",
+              renderStyle: finalRenderStyle,
+              rng,
+            });
+            shapePositions.push({ x: rx, y: ry, size: rhythmSize, shape: rhythmShape });
+            spatialGrid.insert({ x: rx, y: ry, size: rhythmSize, shape: rhythmShape });
+          }
+          extrasSpent += rhythmCount * styleCost;
+        } else {
+          // Drain RNG — each rhythm step consumes ~3 rng calls for colors
+          for (let r = 0; r < rhythmCount; r++) {
+            rng(); rng(); rng();
+          }
         }
       }
     }
@@ -1077,7 +1338,7 @@ export function renderHashArt(
   // Reset blend mode for post-processing passes
   ctx.globalCompositeOperation = "source-over";
 
-  // ── 5f. Layered masking / cutout portals ───────────────────────
+  // ── 5g. Layered masking / cutout portals ───────────────────────
   // ~18% of images get 1-3 portal windows that paint over foreground
   // with a tinted background wash, creating a "peek through" effect.
   if (rng() < 0.18 && shapePositions.length > 3) {
@@ -1145,15 +1406,30 @@ export function renderHashArt(
 
 
   // ── 6. Flow-line pass — variable color, branching, pressure ────
+  // Optimized: collect all segments into width-quantized buckets, then
+  // render each bucket as a single batched path.  This reduces
+  // beginPath/stroke calls from O(segments) to O(buckets).
   const baseFlowLines = 6 + Math.floor(rng() * 10);
   const numFlowLines = Math.round(baseFlowLines * archetype.flowLineMultiplier);
 
+  // Width buckets — 6 buckets cover the taper×pressure range
+  const FLOW_WIDTH_BUCKETS = 6;
+  type FlowSeg = { x1: number; y1: number; x2: number; y2: number; color: string; alpha: number };
+  const flowBuckets: Array<FlowSeg[]> = [];
+  for (let b = 0; b < FLOW_WIDTH_BUCKETS; b++) flowBuckets.push([]);
+  // Track the representative width for each bucket
+  const flowBucketWidths: number[] = new Array(FLOW_WIDTH_BUCKETS);
+
+  // Pre-compute max possible width for bucket assignment
+  let globalMaxFlowWidth = 0;
+
   for (let i = 0; i < numFlowLines; i++) {
     let fx = rng() * width;
     let fy = rng() * height;
     const steps = 30 + Math.floor(rng() * 40);
     const stepLen = (3 + rng() * 5) * scaleFactor;
     const startWidth = (1 + rng() * 3) * scaleFactor;
+    if (startWidth > globalMaxFlowWidth) globalMaxFlowWidth = startWidth;
 
     // Variable color: interpolate between two hierarchy colors along the stroke
     const lineColorStart = enforceContrast(pickHierarchyColor(colorHierarchy, rng), bgLum);
@@ -1173,24 +1449,29 @@ export function renderHashArt(
 
       if (fx < 0 || fx > width || fy < 0 || fy > height) break;
 
+      // Skip segments that pass through void zones
+      if (isInVoidZone(fx, fy, voidZones)) {
+        prevX = fx;
+        prevY = fy;
+        continue;
+      }
+
       const t = s / steps;
-      // Taper + pressure
       const taper = 1 - t * 0.8;
       const pressure = 0.6 + 0.4 * Math.sin(t * pressureFreq * Math.PI + pressurePhase);
-
-      ctx.globalAlpha = lineAlpha * taper;
-      // Interpolate color along stroke
+      const segWidth = startWidth * taper * pressure;
+      const segAlpha = lineAlpha * taper;
       const lineColor = t < 0.5
         ? hexWithAlpha(lineColorStart, 0.4 + t * 0.2)
         : hexWithAlpha(lineColorEnd, 0.4 + (1 - t) * 0.2);
-      ctx.strokeStyle = lineColor;
-      ctx.lineWidth = startWidth * taper * pressure;
-      ctx.lineCap = "round";
 
-      ctx.beginPath();
-      ctx.moveTo(prevX, prevY);
-      ctx.lineTo(fx, fy);
-      ctx.stroke();
+      // Quantize width into bucket
+      const bucketIdx = Math.min(
+        FLOW_WIDTH_BUCKETS - 1,
+        Math.floor((segWidth / (globalMaxFlowWidth || 1)) * FLOW_WIDTH_BUCKETS),
+      );
+      flowBuckets[bucketIdx].push({ x1: prevX, y1: prevY, x2: fx, y2: fy, color: lineColor, alpha: segAlpha });
+      flowBucketWidths[bucketIdx] = segWidth;
 
       // Branching: ~12% chance per step to spawn a thinner child stroke
       if (rng() < 0.12 && s > 5 && s < steps - 10) {
@@ -1207,12 +1488,14 @@ export function renderHashArt(
           by += Math.sin(bAngle) * stepLen * 0.8;
           if (bx < 0 || bx > width || by < 0 || by > height) break;
           const bTaper = 1 - (bs / branchSteps) * 0.9;
-          ctx.globalAlpha = lineAlpha * taper * bTaper * 0.6;
-          ctx.lineWidth = branchWidth * bTaper;
-          ctx.beginPath();
-          ctx.moveTo(bPrevX, bPrevY);
-          ctx.lineTo(bx, by);
-          ctx.stroke();
+          const bSegWidth = branchWidth * bTaper;
+          const bAlpha = lineAlpha * taper * bTaper * 0.6;
+          const bBucket = Math.min(
+            FLOW_WIDTH_BUCKETS - 1,
+            Math.floor((bSegWidth / (globalMaxFlowWidth || 1)) * FLOW_WIDTH_BUCKETS),
+          );
+          flowBuckets[bBucket].push({ x1: bPrevX, y1: bPrevY, x2: bx, y2: by, color: lineColor, alpha: bAlpha });
+          flowBucketWidths[bBucket] = bSegWidth;
           bPrevX = bx;
           bPrevY = by;
         }
@@ -1223,14 +1506,61 @@ export function renderHashArt(
     }
   }
 
+  // Render flow line buckets — one batched path per width bucket
+  // Within each bucket, further sub-batch by quantized alpha (4 levels)
+  ctx.lineCap = "round";
+  const FLOW_ALPHA_BUCKETS = 4;
+  for (let wb = 0; wb < FLOW_WIDTH_BUCKETS; wb++) {
+    const segs = flowBuckets[wb];
+    if (segs.length === 0) continue;
+    ctx.lineWidth = flowBucketWidths[wb];
+
+    // Sub-bucket by alpha
+    const alphaSubs: FlowSeg[][] = [];
+    for (let a = 0; a < FLOW_ALPHA_BUCKETS; a++) alphaSubs.push([]);
+    let maxAlpha = 0;
+    for (let j = 0; j < segs.length; j++) {
+      if (segs[j].alpha > maxAlpha) maxAlpha = segs[j].alpha;
+    }
+    for (let j = 0; j < segs.length; j++) {
+      const ai = Math.min(
+        FLOW_ALPHA_BUCKETS - 1,
+        Math.floor((segs[j].alpha / (maxAlpha || 1)) * FLOW_ALPHA_BUCKETS),
+      );
+      alphaSubs[ai].push(segs[j]);
+    }
+
+    for (let ai = 0; ai < FLOW_ALPHA_BUCKETS; ai++) {
+      const sub = alphaSubs[ai];
+      if (sub.length === 0) continue;
+      // Use the median segment's alpha and color as representative
+      const rep = sub[Math.floor(sub.length / 2)];
+      ctx.globalAlpha = rep.alpha;
+      ctx.strokeStyle = rep.color;
+      ctx.beginPath();
+      for (let j = 0; j < sub.length; j++) {
+        ctx.moveTo(sub[j].x1, sub[j].y1);
+        ctx.lineTo(sub[j].x2, sub[j].y2);
+      }
+      ctx.stroke();
+    }
+  }
+
   // ── 6b. Motion/energy lines — short directional bursts ─────────
+  // Optimized: collect all burst segments, then batch by quantized alpha
   const energyArchetypes = ["dense-chaotic", "cosmic", "neon-glow", "bold-graphic"];
   const hasEnergyLines = energyArchetypes.some(a => archetype.name.includes(a)) || rng() < 0.25;
   if (hasEnergyLines && shapePositions.length > 0) {
     const energyCount = 5 + Math.floor(rng() * 10);
     ctx.lineCap = "round";
+
+    // Collect all energy segments with their computed state
+    const ENERGY_ALPHA_BUCKETS = 3;
+    const energyBuckets: Array<Array<{ x1: number; y1: number; x2: number; y2: number; color: string; lw: number }>> = [];
+    for (let b = 0; b < ENERGY_ALPHA_BUCKETS; b++) energyBuckets.push([]);
+    const energyAlphas: number[] = new Array(ENERGY_ALPHA_BUCKETS).fill(0);
+
     for (let e = 0; e < energyCount; e++) {
-      // Pick a random shape to radiate from
       const source = shapePositions[Math.floor(rng() * shapePositions.length)];
       const burstCount = 2 + Math.floor(rng() * 4);
       const baseAngle = flowAngle(source.x, source.y);
@@ -1244,16 +1574,34 @@ export function renderHashArt(
         const ex = sx + Math.cos(angle) * lineLen;
         const ey = sy + Math.sin(angle) * lineLen;
 
-        ctx.globalAlpha = 0.04 + rng() * 0.06;
-        ctx.strokeStyle = hexWithAlpha(
+        const eAlpha = 0.04 + rng() * 0.06;
+        const eColor = hexWithAlpha(
           enforceContrast(pickHierarchyColor(colorHierarchy, rng), bgLum), 0.3,
         );
-        ctx.lineWidth = (0.5 + rng() * 1.5) * scaleFactor;
-        ctx.beginPath();
-        ctx.moveTo(sx, sy);
-        ctx.lineTo(ex, ey);
-        ctx.stroke();
+        const eLw = (0.5 + rng() * 1.5) * scaleFactor;
+
+        // Quantize alpha into bucket
+        const bi = Math.min(ENERGY_ALPHA_BUCKETS - 1, Math.floor((eAlpha - 0.04) / 0.06 * ENERGY_ALPHA_BUCKETS));
+        energyBuckets[bi].push({ x1: sx, y1: sy, x2: ex, y2: ey, color: eColor, lw: eLw });
+        energyAlphas[bi] = eAlpha;
+      }
+    }
+
+    // Render batched energy lines
+    for (let bi = 0; bi < ENERGY_ALPHA_BUCKETS; bi++) {
+      const segs = energyBuckets[bi];
+      if (segs.length === 0) continue;
+      ctx.globalAlpha = energyAlphas[bi];
+      // Use median segment's color and width as representative
+      const rep = segs[Math.floor(segs.length / 2)];
+      ctx.strokeStyle = rep.color;
+      ctx.lineWidth = rep.lw;
+      ctx.beginPath();
+      for (let j = 0; j < segs.length; j++) {
+        ctx.moveTo(segs[j].x1, segs[j].y1);
+        ctx.lineTo(segs[j].x2, segs[j].y2);
       }
+      ctx.stroke();
     }
   }
 
@@ -1279,34 +1627,96 @@ export function renderHashArt(
   }
 
 
-  // ── 7. Noise texture overlay ───────────────────────────────────
+  // ── 7. Noise texture overlay — batched via ImageData ─────────────
+  // Optimized: cap density at large sizes (diminishing returns above ~2K dots),
+  // skip inner pixelScale loop when scale=1, use Uint32Array for faster writes.
   const noiseRng = createRng(seedFromHash(gitHash, 777));
-  const noiseDensity = Math.floor((width * height) / 800);
-  for (let i = 0; i < noiseDensity; i++) {
-    const nx = noiseRng() * width;
-    const ny = noiseRng() * height;
-    const brightness = noiseRng() > 0.5 ? 255 : 0;
-    const alpha = 0.01 + noiseRng() * 0.03;
-    ctx.globalAlpha = alpha;
-    ctx.fillStyle = `rgba(${brightness},${brightness},${brightness},1)`;
-    ctx.fillRect(nx, ny, 1 * scaleFactor, 1 * scaleFactor);
+  const rawNoiseDensity = Math.floor((width * height) / 800);
+  // Cap at 2500 dots — beyond this the visual effect is indistinguishable
+  // but getImageData/putImageData cost scales with canvas size
+  const noiseDensity = Math.min(rawNoiseDensity, 2500);
+  try {
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const data = imageData.data;
+    const pixelScale = Math.max(1, Math.round(scaleFactor));
+    if (pixelScale === 1) {
+      // Fast path — no inner loop, direct pixel write
+      // Pre-compute alpha blend as integer math (avoid float multiply per channel)
+      for (let i = 0; i < noiseDensity; i++) {
+        const nx = Math.floor(noiseRng() * width);
+        const ny = Math.floor(noiseRng() * height);
+        const brightness = noiseRng() > 0.5 ? 255 : 0;
+        // srcA in range [0.01, 0.04] — multiply by 256 for fixed-point
+        const srcA256 = Math.round((0.01 + noiseRng() * 0.03) * 256);
+        const invA256 = 256 - srcA256;
+        const bSrc = brightness * srcA256; // pre-multiply brightness × alpha
+        const idx = (ny * width + nx) << 2;
+        data[idx]     = (data[idx]     * invA256 + bSrc) >> 8;
+        data[idx + 1] = (data[idx + 1] * invA256 + bSrc) >> 8;
+        data[idx + 2] = (data[idx + 2] * invA256 + bSrc) >> 8;
+      }
+    } else {
+      for (let i = 0; i < noiseDensity; i++) {
+        const nx = Math.floor(noiseRng() * width);
+        const ny = Math.floor(noiseRng() * height);
+        const brightness = noiseRng() > 0.5 ? 255 : 0;
+        const srcA256 = Math.round((0.01 + noiseRng() * 0.03) * 256);
+        const invA256 = 256 - srcA256;
+        const bSrc = brightness * srcA256;
+        for (let dy = 0; dy < pixelScale && ny + dy < height; dy++) {
+          for (let dx = 0; dx < pixelScale && nx + dx < width; dx++) {
+            const idx = ((ny + dy) * width + (nx + dx)) << 2;
+            data[idx]     = (data[idx]     * invA256 + bSrc) >> 8;
+            data[idx + 1] = (data[idx + 1] * invA256 + bSrc) >> 8;
+            data[idx + 2] = (data[idx + 2] * invA256 + bSrc) >> 8;
+          }
+        }
+      }
+    }
+    ctx.putImageData(imageData, 0, 0);
+  } catch {
+    // Fallback for environments where getImageData isn't available (e.g. some OffscreenCanvas)
+    for (let i = 0; i < noiseDensity; i++) {
+      const nx = noiseRng() * width;
+      const ny = noiseRng() * height;
+      const brightness = noiseRng() > 0.5 ? 255 : 0;
+      const alpha = 0.01 + noiseRng() * 0.03;
+      ctx.globalAlpha = alpha;
+      ctx.fillStyle = `rgba(${brightness},${brightness},${brightness},1)`;
+      ctx.fillRect(nx, ny, 1 * scaleFactor, 1 * scaleFactor);
+    }
   }
 
   // ── 8. Vignette — darken edges to draw the eye inward ───────────
   ctx.globalAlpha = 1;
   const vignetteStrength = 0.25 + rng() * 0.2;
   const vigGrad = ctx.createRadialGradient(cx, cy, Math.min(width, height) * 0.3, cx, cy, bgRadius);
+  // Tint vignette based on background: warm sepia for light, cool blue for dark
+  const isLightBg = bgLum > 0.5;
+  const vignetteColor = isLightBg
+    ? `rgba(80,60,30,${vignetteStrength.toFixed(3)})`   // warm sepia
+    : `rgba(0,0,0,${vignetteStrength.toFixed(3)})`;      // classic dark
   vigGrad.addColorStop(0, "rgba(0,0,0,0)");
   vigGrad.addColorStop(0.6, "rgba(0,0,0,0)");
-  vigGrad.addColorStop(1, `rgba(0,0,0,${vignetteStrength.toFixed(3)})`);
+  vigGrad.addColorStop(1, vignetteColor);
   ctx.fillStyle = vigGrad;
   ctx.fillRect(0, 0, width, height);
 
-  // ── 9. Organic connecting curves ───────────────────────────────
+  // ── 9. Organic connecting curves — proximity-aware ───────────────
+  // Optimized: batch all curves into alpha-quantized groups to reduce
+  // beginPath/stroke calls from O(numCurves) to O(alphaBuckets).
   if (shapePositions.length > 1) {
     const numCurves = Math.floor((8 * (width * height)) / (1024 * 1024));
+    const maxCurveDist = Math.hypot(width, height) * 0.2; // only connect nearby shapes
     ctx.lineWidth = 0.8 * scaleFactor;
 
+    // Collect curves into 3 alpha buckets
+    const CURVE_ALPHA_BUCKETS = 3;
+    const curveBuckets: Array<Array<{ ax: number; ay: number; cpx: number; cpy: number; bx: number; by: number }>> = [];
+    const curveColors: string[] = [];
+    const curveAlphas: number[] = new Array(CURVE_ALPHA_BUCKETS).fill(0);
+    for (let b = 0; b < CURVE_ALPHA_BUCKETS; b++) curveBuckets.push([]);
+
     for (let i = 0; i < numCurves; i++) {
       const idxA = Math.floor(rng() * shapePositions.length);
       const offset =
@@ -1316,25 +1726,46 @@ export function renderHashArt(
       const a = shapePositions[idxA];
       const b = shapePositions[idxB];
 
-      const mx = (a.x + b.x) / 2;
-      const my = (a.y + b.y) / 2;
       const dx = b.x - a.x;
       const dy = b.y - a.y;
       const dist = Math.hypot(dx, dy);
+
+      // Skip connections between distant shapes
+      if (dist > maxCurveDist) {
+        continue;
+      }
+
+      const mx = (a.x + b.x) / 2;
+      const my = (a.y + b.y) / 2;
       const bulge = (rng() - 0.5) * dist * 0.4;
 
       const cpx = mx + (-dy / (dist || 1)) * bulge;
       const cpy = my + (dx / (dist || 1)) * bulge;
 
-      ctx.globalAlpha = 0.06 + rng() * 0.1;
-      ctx.strokeStyle = hexWithAlpha(
+      const curveAlpha = 0.06 + rng() * 0.1;
+      const curveColor = hexWithAlpha(
         enforceContrast(pickHierarchyColor(colorHierarchy, rng), bgLum),
         0.3,
       );
 
+      const bi = Math.min(CURVE_ALPHA_BUCKETS - 1, Math.floor((curveAlpha - 0.06) / 0.1 * CURVE_ALPHA_BUCKETS));
+      curveBuckets[bi].push({ ax: a.x, ay: a.y, cpx, cpy, bx: b.x, by: b.y });
+      curveAlphas[bi] = curveAlpha;
+      if (!curveColors[bi]) curveColors[bi] = curveColor;
+    }
+
+    // Render batched curves
+    for (let bi = 0; bi < CURVE_ALPHA_BUCKETS; bi++) {
+      const curves = curveBuckets[bi];
+      if (curves.length === 0) continue;
+      ctx.globalAlpha = curveAlphas[bi];
+      ctx.strokeStyle = curveColors[bi];
       ctx.beginPath();
-      ctx.moveTo(a.x, a.y);
-      ctx.quadraticCurveTo(cpx, cpy, b.x, b.y);
+      for (let j = 0; j < curves.length; j++) {
+        const c = curves[j];
+        ctx.moveTo(c.ax, c.ay);
+        ctx.quadraticCurveTo(c.cpx, c.cpy, c.bx, c.by);
+      }
       ctx.stroke();
     }
   }
@@ -1442,12 +1873,15 @@ export function renderHashArt(
       }
     } else if (archName.includes("botanical") || archName.includes("organic") || archName.includes("watercolor")) {
       // Vine tendrils — organic curving lines along edges
+      // Optimized: batch all tendrils into a single path
       ctx.strokeStyle = hexWithAlpha(colorHierarchy.secondary, 0.15);
       ctx.lineWidth = Math.max(0.8, 1.2 * scaleFactor);
       ctx.globalAlpha = 0.12 + borderRng() * 0.08;
       ctx.lineCap = "round";
 
       const tendrilCount = 8 + Math.floor(borderRng() * 8);
+      ctx.beginPath();
+      const leafPositions: Array<{ x: number; y: number; r: number }> = [];
       for (let t = 0; t < tendrilCount; t++) {
         // Start from a random edge point
         const edge = Math.floor(borderRng() * 4);
@@ -1457,7 +1891,6 @@ export function renderHashArt(
         else if (edge === 2) { tx = borderPad; ty = borderRng() * height; }
         else { tx = width - borderPad; ty = borderRng() * height; }
 
-        ctx.beginPath();
         ctx.moveTo(tx, ty);
         const segs = 3 + Math.floor(borderRng() * 4);
         for (let s = 0; s < segs; s++) {
@@ -1471,16 +1904,24 @@ export function renderHashArt(
           ty = cpy3;
           ctx.quadraticCurveTo(cpx2, cpy2, tx, ty);
         }
-        ctx.stroke();
 
-        // Small leaf/dot at tendril end
+        // Collect leaf positions for batch fill
         if (borderRng() < 0.6) {
-          ctx.beginPath();
-          ctx.arc(tx, ty, borderPad * (0.15 + borderRng() * 0.2), 0, Math.PI * 2);
-          ctx.fillStyle = hexWithAlpha(colorHierarchy.secondary, 0.08);
-          ctx.fill();
+          leafPositions.push({ x: tx, y: ty, r: borderPad * (0.15 + borderRng() * 0.2) });
         }
       }
+      ctx.stroke();
+
+      // Batch all leaf dots into a single fill
+      if (leafPositions.length > 0) {
+        ctx.fillStyle = hexWithAlpha(colorHierarchy.secondary, 0.08);
+        ctx.beginPath();
+        for (const leaf of leafPositions) {
+          ctx.moveTo(leaf.x + leaf.r, leaf.y);
+          ctx.arc(leaf.x, leaf.y, leaf.r, 0, Math.PI * 2);
+        }
+        ctx.fill();
+      }
     } else if (archName.includes("celestial") || archName.includes("cosmic") || archName.includes("neon")) {
       // Star-studded arcs along edges
       ctx.globalAlpha = 0.1 + borderRng() * 0.08;
@@ -1496,8 +1937,9 @@ export function renderHashArt(
       ctx.arc(cx, height * 1.3, height * 0.6, Math.PI + 0.3, -0.3);
       ctx.stroke();
 
-      // Scatter small stars along the border region
+      // Scatter small stars along the border region — batched into single path
       const starCount = 15 + Math.floor(borderRng() * 15);
+      ctx.beginPath();
       for (let s = 0; s < starCount; s++) {
         const edge = Math.floor(borderRng() * 4);
         let sx: number, sy: number;
@@ -1508,7 +1950,6 @@ export function renderHashArt(
 
         const starR = (1 + borderRng() * 2.5) * scaleFactor;
         // 4-point star
-        ctx.beginPath();
         for (let p = 0; p < 8; p++) {
           const a = (p / 8) * Math.PI * 2;
           const r = p % 2 === 0 ? starR : starR * 0.4;
@@ -1518,8 +1959,8 @@ export function renderHashArt(
           else ctx.lineTo(px2, py2);
         }
         ctx.closePath();
-        ctx.fill();
       }
+      ctx.fill();
     } else if (archName.includes("minimal") || archName.includes("monochrome") || archName.includes("stipple")) {
       // Thin single rule — understated elegance
       ctx.strokeStyle = hexWithAlpha(colorHierarchy.dominant, 0.1);
@@ -1532,13 +1973,31 @@ export function renderHashArt(
     ctx.restore();
   }
 
-  // ── 11. Signature mark — unique geometric chop from hash prefix ──
+  // ── 11. Signature mark — placed in the least-dense corner ──────
   {
     const sigRng = createRng(seedFromHash(gitHash, 42));
     const sigSize = Math.min(width, height) * 0.025;
-    // Bottom-right corner with padding
-    const sigX = width - sigSize * 2.5;
-    const sigY = height - sigSize * 2.5;
+    const sigMargin = sigSize * 2.5;
+
+    // Find the corner with the lowest local density
+    const cornerCandidates = [
+      { x: sigMargin, y: sigMargin },                         // top-left
+      { x: width - sigMargin, y: sigMargin },                 // top-right
+      { x: sigMargin, y: height - sigMargin },                // bottom-left
+      { x: width - sigMargin, y: height - sigMargin },        // bottom-right
+    ];
+    let bestCorner = cornerCandidates[3]; // default: bottom-right
+    let minDensity = Infinity;
+    for (const corner of cornerCandidates) {
+      const density = spatialGrid.countNear(corner.x, corner.y, sigSize * 5);
+      if (density < minDensity) {
+        minDensity = density;
+        bestCorner = corner;
+      }
+    }
+
+    const sigX = bestCorner.x;
+    const sigY = bestCorner.y;
     const sigSegments = 4 + Math.floor(sigRng() * 4); // 4-7 segments
     const sigColor = hexWithAlpha(colorHierarchy.accent, 0.15);