git-hash-art 0.9.0 → 0.10.1

package/src/lib/render.ts

@@ -31,7 +31,7 @@ import {
     enforceContrast,
     buildColorHierarchy,
     pickHierarchyColor, pickColorGrade,
-    type ColorHierarchy
+    evolveHierarchy, type ColorHierarchy
 } from "./canvas/colors";
 import {
     enhanceShapeGeneration,
@@ -48,7 +48,7 @@ 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";
 
@@ -74,7 +74,8 @@ type CompositionMode =
   | "flow-field"
   | "spiral"
   | "grid-subdivision"
-  | "clustered";
+  | "clustered"
+  | "golden-spiral";
 
 const COMPOSITION_MODES: CompositionMode[] = [
   "radial",
@@ -82,6 +83,7 @@ const COMPOSITION_MODES: CompositionMode[] = [
   "spiral",
   "grid-subdivision",
   "clustered",
+  "golden-spiral",
 ];
 
 // ── Helper: get position based on composition mode ──────────────────
@@ -138,6 +140,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 };
+    }
   }
 }
 
@@ -409,6 +422,9 @@ export function renderHashArt(
   // ── 0e. Light direction — consistent shadow angle ──────────────
   const lightAngle = rng() * Math.PI * 2;
 
+  // ── 0f. Palette evolution — hue drift direction across layers ──
+  const paletteHueShift = (rng() - 0.5) * 40; // -20° to +20° total drift
+
   const scaleFactor = Math.min(width, height) / 1024;
   const adjustedMinSize = minShapeSize * scaleFactor;
   const adjustedMaxSize = maxShapeSize * scaleFactor;
@@ -598,16 +614,68 @@ export function renderHashArt(
     return [rx + (nearest.x - rx) * pull, ry + (nearest.y - ry) * pull];
   }
 
-  // ── 4. Flow field seed values ──────────────────────────────────
+  // ── 3b. Void zone decoration — intentional negative space ────
+  for (const zone of voidZones) {
+    // Subtle halo ring around void zones
+    ctx.globalAlpha = 0.04 + rng() * 0.04;
+    ctx.strokeStyle = hexWithAlpha(colorHierarchy.accent, 0.2);
+    ctx.lineWidth = 1.5 * scaleFactor;
+    ctx.beginPath();
+    ctx.arc(zone.x, zone.y, zone.radius, 0, Math.PI * 2);
+    ctx.stroke();
+
+    // ~50% chance: scatter tiny dots inside the void
+    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);
+      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.arc(
+          zone.x + Math.cos(angle) * dist,
+          zone.y + Math.sin(angle) * dist,
+          dotR, 0, Math.PI * 2,
+        );
+        ctx.fill();
+      }
+    }
+
+    // ~30% chance: thin concentric ring inside
+    if (rng() < 0.3) {
+      ctx.globalAlpha = 0.03 + rng() * 0.03;
+      ctx.strokeStyle = hexWithAlpha(colorHierarchy.dominant, 0.1);
+      ctx.lineWidth = 0.5 * scaleFactor;
+      const innerR = zone.radius * (0.4 + rng() * 0.3);
+      ctx.beginPath();
+      ctx.arc(zone.x, zone.y, innerR, 0, Math.PI * 2);
+      ctx.stroke();
+    }
+  }
+  ctx.globalAlpha = 1;
+
+  // ── 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
@@ -653,6 +721,8 @@ 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 };
@@ -690,6 +760,20 @@ export function renderHashArt(
     const dofStrokeScale = 0.4 + dofFactor * 0.6; // strokes thin out with depth
     const dofContrastReduction = layerRatio * 0.2; // colors fade toward bg
 
+    // Color palette evolution — hue-rotate the hierarchy per layer
+    const layerHierarchy = evolveHierarchy(colorHierarchy, layerRatio, paletteHueShift);
+
+    // Focal depth: shapes near focal points get more detail
+    const focalDetailBoost = (px: number, py: number): number => {
+      let minFocalDist = Infinity;
+      for (const fp of focalPoints) {
+        const d = Math.hypot(px - fp.x, py - fp.y);
+        if (d < minFocalDist) minFocalDist = d;
+      }
+      const maxDist = Math.hypot(width, height) * 0.5;
+      return Math.max(0, 1 - minFocalDist / maxDist); // 1.0 at focal, 0.0 at edges
+    };
+
     for (let i = 0; i < numShapes; i++) {
       // Position from composition mode, then focal bias
       const rawPos = getCompositionPosition(
@@ -716,7 +800,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;
@@ -741,9 +825,9 @@ export function renderHashArt(
         }
       }
 
-      // Positional color from hierarchy + jitter
-      let fillBase = getPositionalColor(x, y, width, height, colorHierarchy, rng);
-      const strokeBase = pickHierarchyColor(colorHierarchy, rng);
+      // Positional color from hierarchy + jitter (using evolved layer palette)
+      let fillBase = getPositionalColor(x, y, width, height, layerHierarchy, rng);
+      const strokeBase = pickHierarchyColor(layerHierarchy, rng);
 
       // Desaturate colors on later layers for depth
       if (atmosphericDesat > 0) {
@@ -841,6 +925,8 @@ export function renderHashArt(
         gradientFillEnd: gradientEnd,
         renderStyle: finalRenderStyle,
         rng,
+        lightAngle,
+        scaleFactor,
       };
 
       if (shouldMirror) {
@@ -853,6 +939,26 @@ export function renderHashArt(
         enhanceShapeGeneration(ctx, shape, finalX, finalY, shapeConfig);
       }
 
+      // ── 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,
+          });
+        }
+      }
+
       shapePositions.push({ x: finalX, y: finalY, size, shape });
 
       // ── 5c. Size echo — large shapes spawn trailing smaller copies ──
@@ -884,7 +990,10 @@ export function renderHashArt(
       }
 
       // ── 5d. Recursive nesting ──────────────────────────────────
-      if (size > adjustedMaxSize * 0.4 && rng() < 0.15) {
+      // Focal depth: shapes near focal points get more detail
+      const focalProximity = focalDetailBoost(finalX, finalY);
+      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
@@ -920,7 +1029,8 @@ export function renderHashArt(
       }
 
       // ── 5e. Shape constellations — pre-composed groups ─────────
-      if (size > adjustedMaxSize * 0.35 && rng() < 0.12) {
+      const constellationChance = 0.12 + focalProximity * 0.1; // 12-22% near focal
+      if (size > adjustedMaxSize * 0.35 && rng() < constellationChance) {
         const constellation = CONSTELLATIONS[Math.floor(rng() * CONSTELLATIONS.length)];
         const members = constellation.build(rng, size);
         const groupRotation = rng() * Math.PI * 2;
@@ -967,6 +1077,72 @@ export function renderHashArt(
   // Reset blend mode for post-processing passes
   ctx.globalCompositeOperation = "source-over";
 
+  // ── 5f. 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);
@@ -1047,7 +1223,41 @@ export function renderHashArt(
     }
   }
 
-  // ── 6b. Apply symmetry mirroring ─────────────────────────────────
+  // ── 6b. Motion/energy lines — short directional bursts ─────────
+  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";
+    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);
+
+      for (let b = 0; b < burstCount; b++) {
+        const angle = baseAngle + (rng() - 0.5) * 1.2;
+        const lineLen = (source.size * 0.3 + rng() * source.size * 0.5) * scaleFactor * 0.3;
+        const startDist = source.size * 0.5;
+        const sx = source.x + Math.cos(angle) * startDist;
+        const sy = source.y + Math.sin(angle) * startDist;
+        const ex = sx + Math.cos(angle) * lineLen;
+        const ey = sy + Math.sin(angle) * lineLen;
+
+        ctx.globalAlpha = 0.04 + rng() * 0.06;
+        ctx.strokeStyle = 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();
+      }
+    }
+  }
+
+  // ── 6c. Apply symmetry mirroring ─────────────────────────────────
   if (symmetryMode !== "none") {
     const canvas = ctx.canvas;
     ctx.save();
@@ -1170,6 +1380,202 @@ export function renderHashArt(
     ctx.globalCompositeOperation = "source-over";
   }
 
+  // 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 — unique geometric chop from hash prefix ──
+  {
+    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 sigSegments = 4 + Math.floor(sigRng() * 4); // 4-7 segments
+    const sigColor = hexWithAlpha(colorHierarchy.accent, 0.15);
+
+    ctx.save();
+    ctx.globalAlpha = 0.12 + sigRng() * 0.08;
+    ctx.translate(sigX, sigY);
+    ctx.strokeStyle = sigColor;
+    ctx.fillStyle = hexWithAlpha(colorHierarchy.dominant, 0.06);
+    ctx.lineWidth = Math.max(0.5, 0.8 * scaleFactor);
+
+    // Outer ring
+    ctx.beginPath();
+    ctx.arc(0, 0, sigSize, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.fill();
+
+    // Inner geometric pattern — unique per hash
+    ctx.beginPath();
+    for (let s = 0; s < sigSegments; s++) {
+      const angle1 = sigRng() * Math.PI * 2;
+      const angle2 = sigRng() * Math.PI * 2;
+      const r1 = sigSize * (0.2 + sigRng() * 0.6);
+      const r2 = sigSize * (0.2 + sigRng() * 0.6);
+      ctx.moveTo(Math.cos(angle1) * r1, Math.sin(angle1) * r1);
+      ctx.lineTo(Math.cos(angle2) * r2, Math.sin(angle2) * r2);
+    }
+    ctx.stroke();
+
+    // Center dot
+    ctx.beginPath();
+    ctx.arc(0, 0, sigSize * 0.12, 0, Math.PI * 2);
+    ctx.fillStyle = sigColor;
+    ctx.fill();
+
+    ctx.restore();
+  }
+
   ctx.globalAlpha = 1;
 
 }

package/src/lib/utils.ts

@@ -54,6 +54,115 @@ export const Proportions = {
 
 export type ProportionType = keyof typeof Proportions;
 
+// ── Deterministic 2D Simplex Noise ──────────────────────────────────
+// A compact implementation seeded from the RNG so every hash produces
+// a unique noise field without external dependencies.
+
+/**
+ * Create a seeded 2D simplex noise function.
+ * Returns noise(x, y) → float in approximately [-1, 1].
+ */
+export function createSimplexNoise(rng: () => number): (x: number, y: number) => number {
+  // Build a deterministic permutation table (256 entries, doubled)
+  const perm = new Uint8Array(512);
+  const p = new Uint8Array(256);
+  for (let i = 0; i < 256; i++) p[i] = i;
+  // Fisher-Yates shuffle with our seeded RNG
+  for (let i = 255; i > 0; i--) {
+    const j = Math.floor(rng() * (i + 1));
+    const tmp = p[i]; p[i] = p[j]; p[j] = tmp;
+  }
+  for (let i = 0; i < 512; i++) perm[i] = p[i & 255];
+
+  // 12 gradient vectors for 2D simplex
+  const GRAD2 = [
+    [1,1],[-1,1],[1,-1],[-1,-1],
+    [1,0],[-1,0],[0,1],[0,-1],
+    [1,1],[-1,1],[1,-1],[-1,-1],
+  ];
+
+  const F2 = 0.5 * (Math.sqrt(3) - 1);
+  const G2 = (3 - Math.sqrt(3)) / 6;
+
+  function dot2(g: number[], x: number, y: number): number {
+    return g[0] * x + g[1] * y;
+  }
+
+  return function noise2D(xin: number, yin: number): number {
+    const s = (xin + yin) * F2;
+    const i = Math.floor(xin + s);
+    const j = Math.floor(yin + s);
+    const t = (i + j) * G2;
+    const X0 = i - t;
+    const Y0 = j - t;
+    const x0 = xin - X0;
+    const y0 = yin - Y0;
+
+    let i1: number, j1: number;
+    if (x0 > y0) { i1 = 1; j1 = 0; }
+    else { i1 = 0; j1 = 1; }
+
+    const x1 = x0 - i1 + G2;
+    const y1 = y0 - j1 + G2;
+    const x2 = x0 - 1 + 2 * G2;
+    const y2 = y0 - 1 + 2 * G2;
+
+    const ii = i & 255;
+    const jj = j & 255;
+
+    let n0 = 0, n1 = 0, n2 = 0;
+
+    let t0 = 0.5 - x0 * x0 - y0 * y0;
+    if (t0 >= 0) {
+      t0 *= t0;
+      const gi0 = perm[ii + perm[jj]] % 12;
+      n0 = t0 * t0 * dot2(GRAD2[gi0], x0, y0);
+    }
+
+    let t1 = 0.5 - x1 * x1 - y1 * y1;
+    if (t1 >= 0) {
+      t1 *= t1;
+      const gi1 = perm[ii + i1 + perm[jj + j1]] % 12;
+      n1 = t1 * t1 * dot2(GRAD2[gi1], x1, y1);
+    }
+
+    let t2 = 0.5 - x2 * x2 - y2 * y2;
+    if (t2 >= 0) {
+      t2 *= t2;
+      const gi2 = perm[ii + 1 + perm[jj + 1]] % 12;
+      n2 = t2 * t2 * dot2(GRAD2[gi2], x2, y2);
+    }
+
+    // Scale to approximately [-1, 1]
+    return 70 * (n0 + n1 + n2);
+  };
+}
+
+/**
+ * Fractal Brownian Motion — layer multiple octaves of noise for richer fields.
+ * Returns a function (x, y) → float in approximately [-1, 1].
+ */
+export function createFBM(
+  noise: (x: number, y: number) => number,
+  octaves = 4,
+  lacunarity = 2.0,
+  gain = 0.5,
+): (x: number, y: number) => number {
+  return function fbm(x: number, y: number): number {
+    let value = 0;
+    let amplitude = 1;
+    let frequency = 1;
+    let maxAmp = 0;
+    for (let i = 0; i < octaves; i++) {
+      value += noise(x * frequency, y * frequency) * amplitude;
+      maxAmp += amplitude;
+      amplitude *= gain;
+      frequency *= lacunarity;
+    }
+    return value / maxAmp;
+  };
+}
+
 interface Pattern {
   type: string;
   config: any;