git-hash-art 0.11.0 → 0.13.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 {
@@ -52,6 +51,40 @@ import { createRng, seedFromHash, createSimplexNoise, createFBM } from "./utils"
 import { DEFAULT_CONFIG, type GenerationConfig } from "../types";
 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) ───────
 
@@ -446,6 +479,15 @@ export function renderHashArt(
   config: Partial<GenerationConfig> = {},
 ): void {
   const finalConfig: GenerationConfig = { ...DEFAULT_CONFIG, ...config };
+  const _dt = finalConfig._debugTiming;
+  const _t = _dt ? () => performance.now() : undefined;
+  let _p = _t ? _t() : 0;
+  function _mark(name: string) {
+    if (!_dt || !_t) return;
+    const now = _t();
+    _dt.phases[name] = (now - _p);
+    _p = now;
+  }
 
   const rng = createRng(seedFromHash(gitHash));
 
@@ -497,13 +539,16 @@ export function renderHashArt(
   const cx = width / 2;
   const cy = height / 2;
 
+  _mark("0_setup");
+
   // ── 1. Background ──────────────────────────────────────────────
   const bgRadius = Math.hypot(cx, cy);
   drawBackground(ctx, archetype.backgroundStyle, bgStart, bgEnd, width, height, cx, cy, bgRadius, rng, colors);
 
   // Gradient mesh overlay — 3-4 color control points for richer backgrounds
+  // Use source-over instead of soft-light for cheaper compositing
   const meshPoints = 3 + Math.floor(rng() * 2);
-  ctx.globalCompositeOperation = "soft-light";
+  ctx.globalAlpha = 1;
   for (let i = 0; i < meshPoints; i++) {
     const mx = rng() * width;
     const my = rng() * height;
@@ -512,104 +557,114 @@ export function renderHashArt(
     const grad = ctx.createRadialGradient(mx, my, 0, mx, my, mRadius);
     grad.addColorStop(0, hexWithAlpha(mColor, 0.08 + rng() * 0.06));
     grad.addColorStop(1, "rgba(0,0,0,0)");
-    ctx.globalAlpha = 1;
     ctx.fillStyle = grad;
-    ctx.fillRect(0, 0, width, height);
+    // Clip to gradient bounding box — avoids blending transparent pixels
+    const gx = Math.max(0, mx - mRadius);
+    const gy = Math.max(0, my - mRadius);
+    const gw = Math.min(width, mx + mRadius) - gx;
+    const gh = Math.min(height, my + mRadius) - gy;
+    ctx.fillRect(gx, gy, gw, gh);
   }
-  ctx.globalCompositeOperation = "source-over";
 
   // Compute average background luminance for contrast enforcement
   const bgLum = (luminance(bgStart) + luminance(bgEnd)) / 2;
 
   // ── 1b. Layered background — archetype-coherent shapes ─────────
+  // Use source-over with pre-multiplied alpha instead of soft-light
+  // for much cheaper compositing (soft-light requires per-pixel blend)
   const bgShapeCount = 3 + Math.floor(rng() * 4);
-  ctx.globalCompositeOperation = "soft-light";
   for (let i = 0; i < bgShapeCount; i++) {
     const bx = rng() * width;
     const by = rng() * height;
     const bSize = (width * 0.3 + rng() * width * 0.5);
     const bColor = pickHierarchyColor(colorHierarchy, rng);
-    ctx.globalAlpha = 0.03 + rng() * 0.05;
+    ctx.globalAlpha = (0.03 + rng() * 0.05) * 0.5; // halved to compensate for source-over vs soft-light
     ctx.fillStyle = hexWithAlpha(bColor, 0.15);
     ctx.beginPath();
     // Use archetype-appropriate background shapes
     if (archetype.name === "geometric-precision" || archetype.name === "op-art") {
-      // Rectangular shapes for geometric archetypes
       ctx.rect(bx - bSize / 2, by - bSize / 2, bSize, bSize * (0.5 + rng() * 0.5));
     } else {
       ctx.arc(bx, by, bSize / 2, 0, Math.PI * 2);
     }
     ctx.fill();
   }
-  // Subtle concentric rings from center
+  // Subtle concentric rings from center — batched into single stroke
   const ringCount = 2 + Math.floor(rng() * 3);
   ctx.globalAlpha = 0.02 + rng() * 0.03;
   ctx.strokeStyle = hexWithAlpha(colorHierarchy.dominant, 0.1);
   ctx.lineWidth = 1 * scaleFactor;
+  ctx.beginPath();
   for (let i = 1; i <= ringCount; i++) {
     const r = (Math.min(width, height) * 0.15) * i;
-    ctx.beginPath();
+    ctx.moveTo(cx + r, cy);
     ctx.arc(cx, cy, r, 0, Math.PI * 2);
-    ctx.stroke();
   }
-  ctx.globalCompositeOperation = "source-over";
+  ctx.stroke();
 
   // ── 1c. Background pattern layer — subtle textured paper ───────
   const bgPatternRoll = rng();
   if (bgPatternRoll < 0.6) {
     ctx.save();
-    ctx.globalCompositeOperation = "soft-light";
     const patternOpacity = 0.02 + rng() * 0.04;
     const patternColor = hexWithAlpha(colorHierarchy.dominant, 0.15);
 
     if (bgPatternRoll < 0.2) {
-      // 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;
+      // Dot grid — use fillRect instead of arcs (much cheaper, no path building)
+      const dotSpacing = Math.max(12, Math.min(width, height) * (0.015 + rng() * 0.015));
+      const dotDiam = Math.max(1, Math.round(dotSpacing * 0.16));
       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.moveTo(px + dotR, py);
-          ctx.arc(px, py, dotR, 0, Math.PI * 2);
+      let dotCount = 0;
+      for (let px = 0; px < width && dotCount < 2000; px += dotSpacing) {
+        for (let py = 0; py < height && dotCount < 2000; py += dotSpacing) {
+          ctx.fillRect(px, py, dotDiam, dotDiam);
+          dotCount++;
         }
       }
-      ctx.fill();
     } else if (bgPatternRoll < 0.4) {
-      // Diagonal lines — batched into a single path
-      const lineSpacing = Math.max(6, Math.min(width, height) * (0.02 + rng() * 0.02));
+      // Diagonal lines — batched into a single path, capped at 300 lines
+      const lineSpacing = Math.max(10, 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) {
+      let lineCount = 0;
+      for (let d = -diag; d < diag && lineCount < 300; d += lineSpacing) {
         ctx.moveTo(d, 0);
         ctx.lineTo(d + height, height);
+        lineCount++;
       }
       ctx.stroke();
     } else {
-      // Tessellation — hexagonal grid, batched into a single path
-      const tessSize = Math.max(10, Math.min(width, height) * (0.025 + rng() * 0.02));
+      // Tessellation — hexagonal grid, capped at 500 hexagons
+      const tessSize = Math.max(15, 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;
+      // Pre-compute hex vertex offsets (avoid trig per vertex)
+      const hexVx: number[] = [];
+      const hexVy: number[] = [];
+      for (let s = 0; s < 6; s++) {
+        const angle = (Math.PI / 3) * s - Math.PI / 6;
+        hexVx.push(Math.cos(angle) * tessSize * 0.5);
+        hexVy.push(Math.sin(angle) * tessSize * 0.5);
+      }
       ctx.beginPath();
-      for (let row = 0; row * tessH < height + tessH; row++) {
+      let hexCount = 0;
+      for (let row = 0; row * tessH < height + tessH && hexCount < 500; row++) {
         const offsetX = (row % 2) * tessSize * 0.75;
-        for (let col = 0; col * tessSize * 1.5 < width + tessSize * 1.5; col++) {
+        for (let col = 0; col * tessSize * 1.5 < width + tessSize * 1.5 && hexCount < 500; col++) {
           const hx = col * tessSize * 1.5 + offsetX;
           const hy = row * tessH;
-          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;
-            const vy = hy + Math.sin(angle) * tessSize * 0.5;
-            if (s === 0) ctx.moveTo(vx, vy);
-            else ctx.lineTo(vx, vy);
+          ctx.moveTo(hx + hexVx[0], hy + hexVy[0]);
+          for (let s = 1; s < 6; s++) {
+            ctx.lineTo(hx + hexVx[s], hy + hexVy[s]);
           }
           ctx.closePath();
+          hexCount++;
         }
       }
       ctx.stroke();
@@ -618,6 +673,8 @@ export function renderHashArt(
   }
   ctx.globalCompositeOperation = "source-over";
 
+  _mark("1_background");
+
   // ── 2. Composition mode — archetype-aware selection ──────────────
   const compositionMode: CompositionMode = rng() < 0.7
     ? archetype.preferredCompositions[Math.floor(rng() * archetype.preferredCompositions.length)]
@@ -707,23 +764,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
@@ -739,6 +800,8 @@ export function renderHashArt(
   }
   ctx.globalAlpha = 1;
 
+  _mark("2_3_composition_focal");
+
   // ── 4. Flow field — simplex noise for organic variation ─────────
   // Create a seeded simplex noise field (unique per hash)
   const noiseFieldRng = createRng(seedFromHash(gitHash, 333));
@@ -818,9 +881,33 @@ export function renderHashArt(
   }
 
 
+  _mark("4_flowfield_hero");
+
   // ── 5. Shape layers ────────────────────────────────────────────
   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 =
@@ -957,7 +1044,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);
@@ -1016,28 +1126,37 @@ 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 });
@@ -1047,29 +1166,33 @@ export function renderHashArt(
       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 });
-          spatialGrid.insert({ 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 ──────────────────────────────────
@@ -1078,36 +1201,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();
+          }
         }
       }
 
@@ -1117,42 +1255,58 @@ 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,
-          );
 
-          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 });
-          spatialGrid.insert({ x: mx, y: my, size: member.size, shape: memberShape });
+        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();
+          }
         }
       }
 
@@ -1165,37 +1319,45 @@ export function renderHashArt(
         const rhythmDecay = 0.7 + rng() * 0.15; // size multiplier per step
         const rhythmShape = shape; // same shape for visual rhythm
 
-        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 (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;
+            if (rx < 0 || rx > width || ry < 0 || ry > height) break;
+            if (isInVoidZone(rx, ry, voidZones)) break;
 
-          rhythmSize *= rhythmDecay;
-          if (rhythmSize < adjustedMinSize) break;
+            rhythmSize *= rhythmDecay;
+            if (rhythmSize < adjustedMinSize) break;
 
-          const rhythmAlpha = layerOpacity * (0.6 - r * 0.08);
-          ctx.globalAlpha = Math.max(0.1, rhythmAlpha);
+            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,
-          );
+            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 });
+            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();
+          }
         }
       }
     }
@@ -1203,6 +1365,8 @@ export function renderHashArt(
 
   // Reset blend mode for post-processing passes
   ctx.globalCompositeOperation = "source-over";
+  if (_dt) { _dt.shapeCount = shapePositions.length; _dt.extraCount = extrasSpent; }
+  _mark("5_shape_layers");
 
   // ── 5g. Layered masking / cutout portals ───────────────────────
   // ~18% of images get 1-3 portal windows that paint over foreground
@@ -1271,16 +1435,33 @@ export function renderHashArt(
   }
 
 
+  _mark("5g_portals");
+
   // ── 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);
@@ -1308,23 +1489,21 @@ export function renderHashArt(
       }
 
       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) {
@@ -1341,12 +1520,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;
         }
@@ -1357,14 +1538,63 @@ 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();
+    }
+  }
+
+  _mark("6_flow_lines");
+
   // ── 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);
@@ -1378,19 +1608,39 @@ 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();
     }
   }
 
+  _mark("6b_energy_lines");
+
   // ── 6c. Apply symmetry mirroring ─────────────────────────────────
   if (symmetryMode !== "none") {
     const canvas = ctx.canvas;
@@ -1413,46 +1663,28 @@ export function renderHashArt(
   }
 
 
-  // ── 7. Noise texture overlay — batched via ImageData ─────────────
+  _mark("6c_symmetry");
+
+  // ── 7. Noise texture overlay ─────────────────────────────────────
+  // With density capped at 2500 dots, direct fillRect calls are far cheaper
+  // than the getImageData/putImageData round-trip which copies the entire
+  // pixel buffer (4 × width × height bytes) twice.
   const noiseRng = createRng(seedFromHash(gitHash, 777));
-  const noiseDensity = Math.floor((width * height) / 800);
-  try {
-    const imageData = ctx.getImageData(0, 0, width, height);
-    const data = imageData.data;
-    const pixelScale = Math.max(1, Math.round(scaleFactor));
-    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 alpha = Math.floor((0.01 + noiseRng() * 0.03) * 255);
-      // Write a small block of pixels for scale
-      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)) * 4;
-          // Alpha-blend the noise dot onto existing pixel data
-          const srcA = alpha / 255;
-          const invA = 1 - srcA;
-          data[idx] = Math.round(data[idx] * invA + brightness * srcA);
-          data[idx + 1] = Math.round(data[idx + 1] * invA + brightness * srcA);
-          data[idx + 2] = Math.round(data[idx + 2] * invA + brightness * srcA);
-          // Keep existing alpha
-        }
-      }
-    }
-    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);
-    }
+  const rawNoiseDensity = Math.floor((width * height) / 800);
+  const noiseDensity = Math.min(rawNoiseDensity, 2500);
+  const pixelScale = Math.max(1, Math.round(scaleFactor));
+  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 = `rgb(${brightness},${brightness},${brightness})`;
+    ctx.fillRect(nx, ny, pixelScale, pixelScale);
   }
 
+  _mark("7_noise_texture");
+
   // ── 8. Vignette — darken edges to draw the eye inward ───────────
   ctx.globalAlpha = 1;
   const vignetteStrength = 0.25 + rng() * 0.2;
@@ -1468,12 +1700,23 @@ export function renderHashArt(
   ctx.fillStyle = vigGrad;
   ctx.fillRect(0, 0, width, height);
 
+  _mark("8_vignette");
+
   // ── 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 =
@@ -1488,7 +1731,9 @@ export function renderHashArt(
       const dist = Math.hypot(dx, dy);
 
       // Skip connections between distant shapes
-      if (dist > maxCurveDist) continue;
+      if (dist > maxCurveDist) {
+        continue;
+      }
 
       const mx = (a.x + b.x) / 2;
       const my = (a.y + b.y) / 2;
@@ -1497,19 +1742,36 @@ export function renderHashArt(
       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();
     }
   }
 
+  _mark("9_connecting_curves");
+
   // ── 10. Post-processing ────────────────────────────────────────
 
   // 10a. Color grading — unified tone across the whole image
@@ -1567,6 +1829,8 @@ export function renderHashArt(
     ctx.globalCompositeOperation = "source-over";
   }
 
+  _mark("10_post_processing");
+
   // ── 10e. Generative borders — archetype-driven decorative frames ──
   {
     ctx.save();
@@ -1613,12 +1877,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);
@@ -1628,7 +1895,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++) {
@@ -1642,16 +1908,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;
@@ -1667,8 +1941,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;
@@ -1679,7 +1954,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;
@@ -1689,8 +1963,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);
@@ -1703,6 +1977,8 @@ export function renderHashArt(
     ctx.restore();
   }
 
+  _mark("10e_borders");
+
   // ── 11. Signature mark — placed in the least-dense corner ──────
   {
     const sigRng = createRng(seedFromHash(gitHash, 42));
@@ -1766,5 +2042,6 @@ export function renderHashArt(
   }
 
   ctx.globalAlpha = 1;
+  _mark("11_signature");
 
 }