git-hash-art 0.10.0 → 0.11.0

package/src/lib/render.ts

@@ -48,9 +48,9 @@ import {
     pickStyleForShape,
     SHAPE_PROFILES
 } from "./canvas/shapes/affinity";
-import { createRng, seedFromHash } from "./utils";
+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";
 
 
 // ── Shape categories for weighted selection (legacy fallback) ───────
@@ -69,19 +69,13 @@ const SACRED_SHAPES = [
 
 // ── Composition modes ───────────────────────────────────────────────
 
-type CompositionMode =
-  | "radial"
-  | "flow-field"
-  | "spiral"
-  | "grid-subdivision"
-  | "clustered";
-
-const COMPOSITION_MODES: CompositionMode[] = [
+const ALL_COMPOSITION_MODES: CompositionMode[] = [
   "radial",
   "flow-field",
   "spiral",
   "grid-subdivision",
   "clustered",
+  "golden-spiral",
 ];
 
 // ── Helper: get position based on composition mode ──────────────────
@@ -138,6 +132,17 @@ function getCompositionPosition(
     default: {
       return { x: rng() * width, y: rng() * height };
     }
+    case "golden-spiral": {
+      // Logarithmic spiral: r = a * e^(b*theta), with golden angle spacing
+      const PHI = (1 + Math.sqrt(5)) / 2;
+      const goldenAngle = 2 * Math.PI / (PHI * PHI); // ~137.5° in radians
+      const t = shapeIndex / totalShapes;
+      const angle = shapeIndex * goldenAngle + rng() * 0.3;
+      const maxR = Math.min(width, height) * 0.44;
+      // Shapes spiral outward with sqrt distribution for even area coverage
+      const r = Math.sqrt(t) * maxR + (rng() - 0.5) * maxR * 0.08;
+      return { x: cx + Math.cos(angle) * r, y: cy + Math.sin(angle) * r };
+    }
   }
 }
 
@@ -180,7 +185,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,
@@ -485,44 +563,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;
@@ -531,17 +610,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";
@@ -551,7 +631,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 },
@@ -577,14 +657,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] {
@@ -643,21 +739,35 @@ export function renderHashArt(
   }
   ctx.globalAlpha = 1;
 
-  // ── 4. Flow field seed values ──────────────────────────────────
+  // ── 4. Flow field — simplex noise for organic variation ─────────
+  // Create a seeded simplex noise field (unique per hash)
+  const noiseFieldRng = createRng(seedFromHash(gitHash, 333));
+  const simplexNoise = createSimplexNoise(noiseFieldRng);
+  const fbmNoise = createFBM(simplexNoise, 3, 2.0, 0.5);
   const fieldAngleBase = rng() * Math.PI * 2;
-  const fieldFreq = 0.5 + rng() * 2;
+  const fieldFreq = 1.5 + rng() * 2.5; // noise sampling frequency
 
   function flowAngle(x: number, y: number): number {
-    return (
-      fieldAngleBase +
-      Math.sin((x / width) * fieldFreq * Math.PI * 2) * Math.PI * 0.5 +
-      Math.cos((y / height) * fieldFreq * Math.PI * 2) * Math.PI * 0.5
-    );
+    // Sample FBM noise at the position, scaled by frequency
+    const nx = (x / width) * fieldFreq;
+    const ny = (y / height) * fieldFreq;
+    return fieldAngleBase + fbmNoise(nx, ny) * Math.PI;
+  }
+
+  // Noise-based size modulation — shapes in "high noise" areas get scaled
+  function noiseSizeModulation(x: number, y: number): number {
+    const n = simplexNoise((x / width) * 3, (y / height) * 3);
+    // Map [-1,1] to [0.7, 1.3] — subtle terrain-like size variation
+    return 0.7 + (n + 1) * 0.3;
   }
 
   // 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;
 
@@ -698,15 +808,17 @@ export function renderHashArt(
       gradientFillEnd: jitterColorHSL(colorHierarchy.secondary, rng, 10, 0.1),
       renderStyle: heroStyle,
       rng,
+      lightAngle,
+      scaleFactor,
     });
 
     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);
 
   for (let layer = 0; layer < layers; layer++) {
@@ -767,7 +879,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;
       }
 
@@ -775,7 +887,7 @@ export function renderHashArt(
       const sizeT = Math.pow(rng(), archetype.sizePower);
       const size =
         (adjustedMinSize + sizeT * (adjustedMaxSize - adjustedMinSize)) *
-        layerSizeScale;
+        layerSizeScale * noiseSizeModulation(x, y);
 
       // Size fraction for affinity-aware shape selection
       const sizeFraction = size / adjustedMaxSize;
@@ -856,17 +968,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) {
@@ -900,6 +1006,8 @@ export function renderHashArt(
         gradientFillEnd: gradientEnd,
         renderStyle: finalRenderStyle,
         rng,
+        lightAngle,
+        scaleFactor,
       };
 
       if (shouldMirror) {
@@ -933,6 +1041,7 @@ export function renderHashArt(
       }
 
       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) {
@@ -959,6 +1068,7 @@ export function renderHashArt(
             rng,
           });
           shapePositions.push({ x: echoX, y: echoY, size: echoSize, shape });
+          spatialGrid.insert({ x: echoX, y: echoY, size: echoSize, shape });
         }
       }
 
@@ -1042,6 +1152,50 @@ export function renderHashArt(
             rng,
           });
           shapePositions.push({ x: mx, y: my, size: member.size, shape: memberShape });
+          spatialGrid.insert({ 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
+
+        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 });
         }
       }
     }
@@ -1050,6 +1204,72 @@ export function renderHashArt(
   // Reset blend mode for post-processing passes
   ctx.globalCompositeOperation = "source-over";
 
+  // ── 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) {
+    const portalCount = 1 + Math.floor(rng() * 2);
+    for (let p = 0; p < portalCount; p++) {
+      // Pick a position biased toward placed shapes
+      const sourceShape = shapePositions[Math.floor(rng() * shapePositions.length)];
+      const portalX = sourceShape.x + (rng() - 0.5) * sourceShape.size * 0.5;
+      const portalY = sourceShape.y + (rng() - 0.5) * sourceShape.size * 0.5;
+      const portalSize = adjustedMaxSize * (0.15 + rng() * 0.25);
+
+      // Pick a portal shape from the palette
+      const portalShape = pickShapeFromPalette(shapePalette, rng, portalSize / adjustedMaxSize);
+      const portalRotation = rng() * 360;
+      const portalAlpha = 0.6 + rng() * 0.35;
+
+      ctx.save();
+      ctx.translate(portalX, portalY);
+      ctx.rotate((portalRotation * Math.PI) / 180);
+
+      // Step 1: Clip to the portal shape and fill with background wash
+      ctx.beginPath();
+      shapes[portalShape]?.(ctx, portalSize);
+      ctx.clip();
+
+      // Fill the clipped region with a radial gradient from background colors
+      const portalColor = jitterColorHSL(bgStart, rng, 15, 0.1);
+      const portalGrad = ctx.createRadialGradient(0, 0, 0, 0, 0, portalSize);
+      portalGrad.addColorStop(0, portalColor);
+      portalGrad.addColorStop(1, bgEnd);
+      ctx.globalAlpha = portalAlpha;
+      ctx.fillStyle = portalGrad;
+      ctx.fillRect(-portalSize, -portalSize, portalSize * 2, portalSize * 2);
+
+      // Optional: subtle inner texture — a few tiny dots inside the portal
+      if (rng() < 0.5) {
+        const dotCount = 3 + Math.floor(rng() * 5);
+        ctx.globalAlpha = portalAlpha * 0.3;
+        ctx.fillStyle = hexWithAlpha(pickHierarchyColor(colorHierarchy, rng), 0.2);
+        for (let d = 0; d < dotCount; d++) {
+          const dx = (rng() - 0.5) * portalSize * 1.4;
+          const dy = (rng() - 0.5) * portalSize * 1.4;
+          const dr = (1 + rng() * 3) * scaleFactor;
+          ctx.beginPath();
+          ctx.arc(dx, dy, dr, 0, Math.PI * 2);
+          ctx.fill();
+        }
+      }
+
+      ctx.restore();
+
+      // Step 2: Draw a border ring around the portal (outside the clip)
+      ctx.save();
+      ctx.translate(portalX, portalY);
+      ctx.rotate((portalRotation * Math.PI) / 180);
+      ctx.globalAlpha = 0.15 + rng() * 0.2;
+      ctx.strokeStyle = hexWithAlpha(pickHierarchyColor(colorHierarchy, rng), 0.5);
+      ctx.lineWidth = (1.5 + rng() * 2.5) * scaleFactor;
+      ctx.beginPath();
+      shapes[portalShape]?.(ctx, portalSize * 1.06);
+      ctx.stroke();
+      ctx.restore();
+    }
+  }
+
 
   // ── 6. Flow-line pass — variable color, branching, pressure ────
   const baseFlowLines = 6 + Math.floor(rng() * 10);
@@ -1080,6 +1300,13 @@ 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;
@@ -1186,32 +1413,65 @@ export function renderHashArt(
   }
 
 
-  // ── 7. Noise texture overlay ───────────────────────────────────
+  // ── 7. Noise texture overlay — batched via ImageData ─────────────
   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);
+  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);
+    }
   }
 
   // ── 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 ───────────────
   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;
 
     for (let i = 0; i < numCurves; i++) {
@@ -1223,11 +1483,15 @@ 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;
@@ -1287,13 +1551,183 @@ export function renderHashArt(
     ctx.globalCompositeOperation = "source-over";
   }
 
-  // ── 11. Signature mark — unique geometric chop from hash prefix ──
+  // 10d. Gradient map — map luminance through a two-color gradient
+  // Uses dominant→accent as the dark→light ramp for a cohesive tonal look
+  if (rng() < 0.35) {
+    const gmDark = colorHierarchy.dominant;
+    const gmLight = colorHierarchy.accent;
+    ctx.globalAlpha = 0.06 + rng() * 0.06; // very subtle: 6-12%
+    ctx.globalCompositeOperation = "color";
+    // Paint a linear gradient from dark color (top) to light color (bottom)
+    const gmGrad = ctx.createLinearGradient(0, 0, 0, height);
+    gmGrad.addColorStop(0, gmDark);
+    gmGrad.addColorStop(1, gmLight);
+    ctx.fillStyle = gmGrad;
+    ctx.fillRect(0, 0, width, height);
+    ctx.globalCompositeOperation = "source-over";
+  }
+
+  // ── 10e. Generative borders — archetype-driven decorative frames ──
+  {
+    ctx.save();
+    ctx.globalAlpha = 1;
+    ctx.globalCompositeOperation = "source-over";
+    const borderRng = createRng(seedFromHash(gitHash, 314));
+    const borderPad = Math.min(width, height) * 0.025;
+    const borderColor = hexWithAlpha(colorHierarchy.accent, 0.2);
+    const borderColorSolid = colorHierarchy.accent;
+    const archName = archetype.name;
+
+    if (archName.includes("geometric") || archName.includes("op-art") || archName.includes("shattered")) {
+      // Clean ruled lines with corner ornaments
+      ctx.strokeStyle = borderColor;
+      ctx.lineWidth = Math.max(1, 1.5 * scaleFactor);
+      ctx.globalAlpha = 0.18 + borderRng() * 0.1;
+
+      // Outer rule
+      ctx.strokeRect(borderPad, borderPad, width - borderPad * 2, height - borderPad * 2);
+      // Inner rule (thinner, offset)
+      const innerPad = borderPad * 1.8;
+      ctx.lineWidth = Math.max(0.5, 0.8 * scaleFactor);
+      ctx.globalAlpha *= 0.7;
+      ctx.strokeRect(innerPad, innerPad, width - innerPad * 2, height - innerPad * 2);
+
+      // Corner ornaments — small squares at each corner
+      const ornSize = borderPad * 0.6;
+      ctx.fillStyle = hexWithAlpha(borderColorSolid, 0.12);
+      const corners = [
+        [borderPad, borderPad],
+        [width - borderPad - ornSize, borderPad],
+        [borderPad, height - borderPad - ornSize],
+        [width - borderPad - ornSize, height - borderPad - ornSize],
+      ];
+      for (const [cx2, cy2] of corners) {
+        ctx.fillRect(cx2, cy2, ornSize, ornSize);
+        // Diagonal cross inside ornament
+        ctx.beginPath();
+        ctx.moveTo(cx2, cy2);
+        ctx.lineTo(cx2 + ornSize, cy2 + ornSize);
+        ctx.moveTo(cx2 + ornSize, cy2);
+        ctx.lineTo(cx2, cy2 + ornSize);
+        ctx.stroke();
+      }
+    } else if (archName.includes("botanical") || archName.includes("organic") || archName.includes("watercolor")) {
+      // Vine tendrils — organic curving lines along edges
+      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);
+      for (let t = 0; t < tendrilCount; t++) {
+        // Start from a random edge point
+        const edge = Math.floor(borderRng() * 4);
+        let tx: number, ty: number;
+        if (edge === 0) { tx = borderRng() * width; ty = borderPad; }
+        else if (edge === 1) { tx = borderRng() * width; ty = height - borderPad; }
+        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++) {
+          const inward = borderPad * (1 + borderRng() * 2);
+          // Curl inward from edge
+          const cpx2 = tx + (borderRng() - 0.5) * borderPad * 4;
+          const cpy2 = ty + (edge < 2 ? (edge === 0 ? inward : -inward) : 0);
+          const cpx3 = tx + (edge >= 2 ? (edge === 2 ? inward : -inward) : (borderRng() - 0.5) * borderPad * 3);
+          const cpy3 = ty + (borderRng() - 0.5) * borderPad * 3;
+          tx = cpx3;
+          ty = cpy3;
+          ctx.quadraticCurveTo(cpx2, cpy2, tx, ty);
+        }
+        ctx.stroke();
+
+        // Small leaf/dot at tendril end
+        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();
+        }
+      }
+    } else if (archName.includes("celestial") || archName.includes("cosmic") || archName.includes("neon")) {
+      // Star-studded arcs along edges
+      ctx.globalAlpha = 0.1 + borderRng() * 0.08;
+      ctx.fillStyle = hexWithAlpha(colorHierarchy.accent, 0.2);
+      ctx.strokeStyle = hexWithAlpha(colorHierarchy.accent, 0.12);
+      ctx.lineWidth = Math.max(0.5, 0.7 * scaleFactor);
+
+      // Subtle arc along top and bottom
+      ctx.beginPath();
+      ctx.arc(cx, -height * 0.3, height * 0.6, 0.3, Math.PI - 0.3);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.arc(cx, height * 1.3, height * 0.6, Math.PI + 0.3, -0.3);
+      ctx.stroke();
+
+      // Scatter small stars along the border region
+      const starCount = 15 + Math.floor(borderRng() * 15);
+      for (let s = 0; s < starCount; s++) {
+        const edge = Math.floor(borderRng() * 4);
+        let sx: number, sy: number;
+        if (edge === 0) { sx = borderRng() * width; sy = borderPad * (0.5 + borderRng()); }
+        else if (edge === 1) { sx = borderRng() * width; sy = height - borderPad * (0.5 + borderRng()); }
+        else if (edge === 2) { sx = borderPad * (0.5 + borderRng()); sy = borderRng() * height; }
+        else { sx = width - borderPad * (0.5 + borderRng()); sy = borderRng() * height; }
+
+        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;
+          const px2 = sx + Math.cos(a) * r;
+          const py2 = sy + Math.sin(a) * r;
+          if (p === 0) ctx.moveTo(px2, py2);
+          else ctx.lineTo(px2, py2);
+        }
+        ctx.closePath();
+        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);
+      ctx.lineWidth = Math.max(0.5, 0.6 * scaleFactor);
+      ctx.globalAlpha = 0.1 + borderRng() * 0.06;
+      ctx.strokeRect(borderPad * 1.5, borderPad * 1.5, width - borderPad * 3, height - borderPad * 3);
+    }
+    // Other archetypes: no border (intentional — not every image needs one)
+
+    ctx.restore();
+  }
+
+  // ── 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);