git-hash-art 0.4.1 → 0.5.0

package/ALGORITHM.md

@@ -9,27 +9,32 @@ Hash String
   │
   ├─► Seed (mulberry32 PRNG)
   │
-  ├─► Color Scheme (hash-driven variation + scheme type selection)
+  ├─► Color Scheme (hash-driven variation + scheme type + temperature mode)
   │
   └─► Rendering Pipeline
        │
-       1.  Background Layer (radial gradient)
+       1.  Background Layer (radial gradient, temperature-shifted)
        1b. Layered Background (faint shapes + concentric rings)
        2.  Composition Mode Selection
-       3.  Focal Points + Void Zones (negative space)
+       2b. Symmetry Mode Selection (none / bilateral / quad)
+       3.  Focal Points (rule-of-thirds biased) + Void Zones
        4.  Flow Field Initialization
+       4b. Hero Shape (large focal anchor, ~60% of images)
        5.  Shape Layers (× N layers)
        │   ├─ Blend Mode (per-layer compositing)
-       │   ├─ Render Style (fill+stroke, wireframe, dashed, watercolor, etc.)
+       │   ├─ Render Style (fill+stroke, wireframe, dashed, watercolor, hatched, incomplete, etc.)
        │   ├─ Position (composition mode + focal bias + density check)
        │   ├─ Shape Selection (layer-weighted)
        │   ├─ Atmospheric Depth (desaturation on later layers)
+       │   ├─ Temperature Contrast (foreground opposite to background)
        │   ├─ Styling (transparency, glow, gradients, color jitter)
        │   ├─ Organic Edges (~15% watercolor bleed)
        │   └─ Recursive Nesting (~15% of large shapes)
        6.  Flow-Line Pass (tapered brush strokes)
+       6b. Symmetry Mirroring (bilateral-x, bilateral-y, or quad)
        7.  Noise Texture Overlay
-       8.  Organic Connecting Curves
+       8.  Vignette (radial edge darkening)
+       9.  Organic Connecting Curves
 ```
 
 ## 1. Deterministic RNG
@@ -53,7 +58,19 @@ The `SacredColorScheme` class derives three harmonious palettes from the hash:
 | Complementary | hue = seed + 180°, contrasting variation | Contrast accents |
 | Triadic | hue = seed + 120° | Additional variety |
 
-These are merged and deduplicated into a single 6-8 color palette. Background colors are darkened variants (65% and 55% brightness) of the base scheme.
+These are merged and deduplicated into a single 6-8 color palette. Background colors are darkened variants (65% and 55% brightness) of the base scheme, with optional temperature shifting.
+
+### Temperature Contrast
+
+The hash deterministically selects a **temperature mode** that creates warm/cool tension across the image:
+
+| Mode | Probability | Background | Foreground |
+|------|-------------|------------|------------|
+| `warm-bg` | ~40% | Hues shifted toward orange (30°) | Hues shifted toward blue (210°) |
+| `cool-bg` | ~40% | Hues shifted toward blue (210°) | Hues shifted toward orange (30°) |
+| `neutral` | ~20% | No temperature shift | No temperature shift |
+
+The shift amount is subtle (15-25%) and increases on later layers, creating progressive temperature separation between foreground and background elements. This produces the kind of warm/cool interplay seen in classical painting.
 
 ### Hash-Driven Color Variation
 
@@ -75,6 +92,7 @@ Scheme types also vary: `analogic`, `mono`, `contrast`, `triade`, `tetrade`. The
 - **`hexWithAlpha(hex, alpha)`** — converts hex to `rgba()` for transparency
 - **`jitterColor(hex, rng, amount)`** — applies ±amount RGB jitter per channel for organic variation
 - **`desaturate(hex, amount)`** — blends toward luminance gray for atmospheric depth
+- **`shiftTemperature(hex, target, amount)`** — shifts hue toward warm (orange) or cool (blue)
 - **Positional blending** — shape fill color is biased by canvas position, creating smooth color flow across the image
 
 ## 3. Background
@@ -104,9 +122,31 @@ The hash deterministically selects one of five composition strategies that contr
 
 Each mode produces fundamentally different visual character from the same shape set.
 
+### Symmetry Modes
+
+~25% of hashes trigger a symmetry mode that mirrors the rendered content:
+
+| Mode | Probability | Effect |
+|------|-------------|--------|
+| `bilateral-x` | 10% | Left half mirrored onto right half |
+| `bilateral-y` | 10% | Top half mirrored onto bottom half |
+| `quad` | 5% | Both axes mirrored (4-fold symmetry) |
+| `none` | 75% | No mirroring |
+
+Symmetry is applied after shape layers and flow lines but before post-processing (noise, vignette, connecting curves). This means the mirrored content gets the same noise texture and vignette as the original, maintaining visual consistency. Symmetrical generative art is disproportionately appealing to humans due to our innate preference for bilateral symmetry.
+
 ## 5. Focal Points & Negative Space
 
-1-2 focal points are placed on the canvas (kept away from edges). Every shape position is pulled toward the nearest focal point by a strength factor (30-70%), creating areas of visual density and intentional-looking composition rather than uniform scatter.
+1-2 focal points are placed on the canvas. **70% of the time**, focal points snap to **rule-of-thirds intersection points** (with slight jitter to avoid a mechanical look), creating compositions that feel intentionally designed. The remaining 30% use free placement within the central 60% of the canvas. Every shape position is pulled toward the nearest focal point by a strength factor (30-70%).
+
+### Hero Shape
+
+~60% of images receive a **hero shape** — a large sacred or complex geometry piece anchored at the primary focal point. The hero shape:
+- Uses sacred/complex shape types (flower of life, fibonacci spiral, merkaba, fractal, etc.)
+- Is sized at 80-130% of the maximum shape size for visual dominance
+- Gets glow effects, gradient fills, and often watercolor rendering
+- Is drawn before the main shape layers so other shapes layer on top of it
+- Creates a clear center of gravity that anchors the entire composition
 
 ### Void Zones (Negative Space)
 
@@ -142,12 +182,14 @@ Instead of always `fill()` + `stroke()`, each shape gets a rendering treatment:
 
 | Style | Description | Probability |
 |-------|-------------|-------------|
-| `fill-and-stroke` | Classic solid fill with outline | ~29% (weighted) |
-| `fill-only` | Soft shapes with no outline | ~14% |
-| `stroke-only` | Wireframe with ghost fill at 30% alpha | ~14% |
-| `double-stroke` | Outer stroke at 2× width + inner stroke in fill color | ~14% |
-| `dashed` | Dashed outline (5% size dash, 3% gap) | ~14% |
-| `watercolor` | 3-4 slightly offset passes at low opacity for bleed effect | ~14% |
+| `fill-and-stroke` | Classic solid fill with outline | ~22% (weighted) |
+| `fill-only` | Soft shapes with no outline | ~11% |
+| `stroke-only` | Wireframe with ghost fill at 30% alpha | ~11% |
+| `double-stroke` | Outer stroke at 2× width + inner stroke in fill color | ~11% |
+| `dashed` | Dashed outline (5% size dash, 3% gap) | ~11% |
+| `watercolor` | 3-4 slightly offset passes at low opacity for bleed effect | ~11% |
+| `hatched` | Cross-hatch texture fill clipped to shape boundary | ~11% |
+| `incomplete` | Only 60-85% of outline drawn via dash patterns | ~11% |
 
 70% of shapes in a layer use the layer's dominant style; 30% pick independently. Additionally, ~15% of `fill-and-stroke` shapes are upgraded to `watercolor` for organic edge effects.
 
@@ -213,6 +255,15 @@ A dedicated noise RNG (seeded separately from the main RNG to avoid affecting sh
 - Very low opacity (1-4%)
 - Creates subtle film-grain texture that adds organic depth
 
+## 8b. Vignette
+
+A radial gradient overlay darkens the edges of the canvas, drawing the viewer's eye toward the center:
+
+- Strength varies by hash: 25-45% maximum edge darkening
+- The vignette begins fading at 60% of the canvas radius from center
+- Applied after noise but before connecting curves, so the curves remain visible at edges
+- Creates a natural "spotlight" effect that makes compositions feel more focused and photographic
+
 ## 9. Organic Connecting Curves
 
 Quadratic bezier curves connect nearby shapes:

package/CHANGELOG.md

@@ -4,8 +4,18 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.5.0](https://github.com/gfargo/git-hash-art/compare/0.4.1...0.5.0)
+
+- feat: visual improvements — composition, color, and rendering upgrades [`#11`](https://github.com/gfargo/git-hash-art/pull/11)
+- feat: warm/cool temperature contrast in color system [`550bc6a`](https://github.com/gfargo/git-hash-art/commit/550bc6a87929d7ebafa973079845e688a00de929)
+- docs: update ALGORITHM.md with all new visual features [`a05de15`](https://github.com/gfargo/git-hash-art/commit/a05de1586684b91266f5a26ea7279fc601dd2202)
+- feat: hatched and incomplete render styles for shape variety [`4f42f7e`](https://github.com/gfargo/git-hash-art/commit/4f42f7e30bac60239b69468e36ef5481dca5d007)
+
 #### [0.4.1](https://github.com/gfargo/git-hash-art/compare/0.4.0...0.4.1)
 
+> 19 March 2026
+
+- chore: release v0.4.1 [`c453061`](https://github.com/gfargo/git-hash-art/commit/c4530616bc40a540ce4d87a8124a1d2665f77376)
 - update README with new feature details [`1e3fcd7`](https://github.com/gfargo/git-hash-art/commit/1e3fcd771ea602b21c9c90cd3809d0d08ace5d3f)
 - update color variations and complementary logic [`9c8f4ba`](https://github.com/gfargo/git-hash-art/commit/9c8f4ba51e1a5730e4c4ddd59218db23d4719129)
 

package/dist/browser.js

@@ -109,6 +109,27 @@ const $b5a262d09b87e373$var$COLOR_VARIATIONS = [
 function $b5a262d09b87e373$var$pickSchemeType(seed) {
     return $b5a262d09b87e373$var$SCHEME_TYPES[Math.abs(seed >> 4) % $b5a262d09b87e373$var$SCHEME_TYPES.length];
 }
+function $b5a262d09b87e373$var$classifyHue(hue) {
+    if (hue >= 0 && hue <= 60 || hue >= 300) return "warm";
+    if (hue >= 150 && hue <= 270) return "cool";
+    return "neutral";
+}
+/**
+ * Shift a hue toward a target temperature zone.
+ * Returns a new hue biased warm or cool.
+ */ function $b5a262d09b87e373$var$shiftHueToward(hue, target, amount) {
+    if (target === "warm") {
+        // Pull toward 30 (orange) — the warmest point
+        const warmTarget = 30;
+        const diff = (warmTarget - hue + 540) % 360 - 180;
+        return (hue + diff * amount + 360) % 360;
+    } else {
+        // Pull toward 210 (blue) — the coolest point
+        const coolTarget = 210;
+        const diff = (coolTarget - hue + 540) % 360 - 180;
+        return (hue + diff * amount + 360) % 360;
+    }
+}
 class $b5a262d09b87e373$export$ab958c550f521376 {
     constructor(gitHash){
         this.seed = (0, $616009579e3d72c5$export$39a95c82b20fdf81)(gitHash);
@@ -116,6 +137,9 @@ class $b5a262d09b87e373$export$ab958c550f521376 {
         // Hash-driven variation and scheme type for palette diversity
         this.variation = $b5a262d09b87e373$var$pickVariation(this.seed);
         this.schemeType = $b5a262d09b87e373$var$pickSchemeType(this.seed);
+        // ~40% warm-bg, ~40% cool-bg, ~20% neutral (no temperature bias)
+        const tempRoll = this.rng();
+        this.temperatureMode = tempRoll < 0.4 ? "warm-bg" : tempRoll < 0.8 ? "cool-bg" : "neutral";
         this.baseScheme = this.generateBaseScheme();
         this.complementaryScheme = this.generateComplementaryScheme();
         this.triadicScheme = this.generateTriadicScheme();
@@ -153,14 +177,34 @@ class $b5a262d09b87e373$export$ab958c550f521376 {
     }
     /**
    * Returns two background colors derived from the hash — darker variants
-   * of the base scheme for gradient backgrounds.
+   * of the base scheme, temperature-shifted for warm/cool contrast.
    */ getBackgroundColors() {
+        let bg0 = this.baseScheme[0];
+        let bg1 = this.baseScheme[1];
+        if (this.temperatureMode !== "neutral") {
+            const bgTemp = this.temperatureMode === "warm-bg" ? "warm" : "cool";
+            bg0 = this.shiftColorTemperature(bg0, bgTemp, 0.3);
+            bg1 = this.shiftColorTemperature(bg1, bgTemp, 0.25);
+        }
         return [
-            this.darken(this.baseScheme[0], 0.65),
-            this.darken(this.baseScheme[1], 0.55)
+            this.darken(bg0, 0.65),
+            this.darken(bg1, 0.55)
         ];
     }
     /**
+   * Returns the temperature mode so the renderer can apply
+   * contrasting temperature to foreground elements.
+   */ getTemperatureMode() {
+        return this.temperatureMode;
+    }
+    /**
+   * Shift a hex color's hue toward warm or cool.
+   */ shiftColorTemperature(hex, target, amount) {
+        const [h, s, l] = $b5a262d09b87e373$var$hexToHsl(hex);
+        const shifted = $b5a262d09b87e373$var$shiftHueToward(h, target, amount);
+        return $b5a262d09b87e373$var$hslToHex(shifted, s, l);
+    }
+    /**
    * Simple hex color darkening by a factor (0 = black, 1 = unchanged).
    */ darken(hex, factor) {
         const c = hex.replace("#", "");
@@ -183,6 +227,55 @@ class $b5a262d09b87e373$export$ab958c550f521376 {
     const clamp = (v)=>Math.max(0, Math.min(255, Math.round(v)));
     return `#${clamp(r).toString(16).padStart(2, "0")}${clamp(g).toString(16).padStart(2, "0")}${clamp(b).toString(16).padStart(2, "0")}`;
 }
+/** Convert hex to HSL [h 0-360, s 0-1, l 0-1]. */ function $b5a262d09b87e373$var$hexToHsl(hex) {
+    const [r, g, b] = $b5a262d09b87e373$var$hexToRgb(hex).map((v)=>v / 255);
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    if (max === min) return [
+        0,
+        0,
+        l
+    ];
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h = 0;
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g) h = ((b - r) / d + 2) / 6;
+    else h = ((r - g) / d + 4) / 6;
+    return [
+        h * 360,
+        s,
+        l
+    ];
+}
+/** Convert HSL [h 0-360, s 0-1, l 0-1] back to hex. */ function $b5a262d09b87e373$var$hslToHex(h, s, l) {
+    h = (h % 360 + 360) % 360;
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+    const m = l - c / 2;
+    let r = 0, g = 0, b = 0;
+    if (h < 60) {
+        r = c;
+        g = x;
+    } else if (h < 120) {
+        r = x;
+        g = c;
+    } else if (h < 180) {
+        g = c;
+        b = x;
+    } else if (h < 240) {
+        g = x;
+        b = c;
+    } else if (h < 300) {
+        r = x;
+        b = c;
+    } else {
+        r = c;
+        b = x;
+    }
+    return $b5a262d09b87e373$var$rgbToHex((r + m) * 255, (g + m) * 255, (b + m) * 255);
+}
 function $b5a262d09b87e373$export$f2121afcad3d553f(hex, alpha) {
     const [r, g, b] = $b5a262d09b87e373$var$hexToRgb(hex);
     return `rgba(${r},${g},${b},${alpha.toFixed(3)})`;
@@ -198,6 +291,10 @@ function $b5a262d09b87e373$export$fb75607d98509d9(hex, amount) {
     const mix = (c)=>c + (gray - c) * amount;
     return $b5a262d09b87e373$var$rgbToHex(mix(r), mix(g), mix(b));
 }
+function $b5a262d09b87e373$export$51ea55f869b7e0d3(hex, target, amount) {
+    const [h, s, l] = $b5a262d09b87e373$var$hexToHsl(hex);
+    return $b5a262d09b87e373$var$hslToHex($b5a262d09b87e373$var$shiftHueToward(h, target, amount), s, l);
+}
 
 
 
@@ -1006,7 +1103,9 @@ const $e0f99502ff383dd8$var$RENDER_STYLES = [
     "stroke-only",
     "double-stroke",
     "dashed",
-    "watercolor"
+    "watercolor",
+    "hatched",
+    "incomplete"
 ];
 function $e0f99502ff383dd8$export$9fd4e64b2acd410e(rng) {
     return $e0f99502ff383dd8$var$RENDER_STYLES[Math.floor(rng() * $e0f99502ff383dd8$var$RENDER_STYLES.length)];
@@ -1083,6 +1182,76 @@ function $e0f99502ff383dd8$export$71b514a25c47df50(ctx, shape, x, y, config) {
                 ctx.globalAlpha /= 0.4;
                 break;
             }
+        case "hatched":
+            {
+                // Fill normally at reduced opacity, then overlay cross-hatch lines
+                const savedAlphaH = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaH * 0.3;
+                ctx.fill();
+                ctx.globalAlpha = savedAlphaH;
+                // Clip to shape, then draw hatch lines
+                ctx.save();
+                ctx.clip();
+                const hatchSpacing = Math.max(3, size * 0.06);
+                const hatchAngle = rng ? rng() * Math.PI : Math.PI / 4;
+                ctx.lineWidth = Math.max(0.5, strokeWidth * 0.4);
+                ctx.globalAlpha = savedAlphaH * 0.6;
+                // Draw parallel lines across the bounding box
+                const extent = size * 0.8;
+                const cos = Math.cos(hatchAngle);
+                const sin = Math.sin(hatchAngle);
+                for(let d = -extent; d <= extent; d += hatchSpacing){
+                    ctx.beginPath();
+                    ctx.moveTo(d * cos - extent * sin, d * sin + extent * cos);
+                    ctx.lineTo(d * cos + extent * sin, d * sin - extent * cos);
+                    ctx.stroke();
+                }
+                // Second pass at perpendicular angle for cross-hatch (~50% chance)
+                if (!rng || rng() < 0.5) {
+                    const crossAngle = hatchAngle + Math.PI / 2;
+                    const cos2 = Math.cos(crossAngle);
+                    const sin2 = Math.sin(crossAngle);
+                    ctx.globalAlpha = savedAlphaH * 0.35;
+                    for(let d = -extent; d <= extent; d += hatchSpacing * 1.4){
+                        ctx.beginPath();
+                        ctx.moveTo(d * cos2 - extent * sin2, d * sin2 + extent * cos2);
+                        ctx.lineTo(d * cos2 + extent * sin2, d * sin2 - extent * cos2);
+                        ctx.stroke();
+                    }
+                }
+                ctx.restore();
+                ctx.globalAlpha = savedAlphaH;
+                // Outline stroke
+                ctx.globalAlpha *= 0.5;
+                ctx.stroke();
+                ctx.globalAlpha /= 0.5;
+                break;
+            }
+        case "incomplete":
+            {
+                // Draw the fill at low opacity, then a dashed stroke that
+                // simulates drawing only part of the outline
+                const savedAlphaI = ctx.globalAlpha;
+                ctx.globalAlpha = savedAlphaI * 0.25;
+                ctx.fill();
+                ctx.globalAlpha = savedAlphaI;
+                // Use a long dash pattern where gaps create the "incomplete" look
+                const completeness = rng ? 0.6 + rng() * 0.25 : 0.7; // 60-85%
+                const segLen = size * 0.12;
+                const gapLen = segLen * ((1 - completeness) / completeness);
+                ctx.setLineDash([
+                    segLen,
+                    gapLen
+                ]);
+                // Offset the dash so each shape starts at a different point
+                ctx.lineDashOffset = rng ? rng() * segLen * 4 : 0;
+                // Slightly thicker stroke for hand-drawn feel
+                ctx.lineWidth = strokeWidth * 1.3;
+                ctx.stroke();
+                ctx.setLineDash([]);
+                ctx.lineDashOffset = 0;
+                break;
+            }
         case "fill-and-stroke":
         default:
             ctx.fill();
@@ -1288,6 +1457,9 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     const colorScheme = new (0, $b5a262d09b87e373$export$ab958c550f521376)(gitHash);
     const colors = colorScheme.getColors();
     const [bgStart, bgEnd] = colorScheme.getBackgroundColors();
+    const tempMode = colorScheme.getTemperatureMode();
+    // Foreground shapes get the opposite temperature for contrast
+    const fgTempTarget = tempMode === "warm-bg" ? "cool" : tempMode === "cool-bg" ? "warm" : null;
     const shapeNames = Object.keys((0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5));
     const scaleFactor = Math.min(width, height) / 1024;
     const adjustedMinSize = minShapeSize * scaleFactor;
@@ -1331,10 +1503,40 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     ctx.globalCompositeOperation = "source-over";
     // ── 2. Composition mode ────────────────────────────────────────
     const compositionMode = $1f63dc64b5593c73$var$COMPOSITION_MODES[Math.floor(rng() * $1f63dc64b5593c73$var$COMPOSITION_MODES.length)];
+    const symRoll = rng();
+    const symmetryMode = symRoll < 0.10 ? "bilateral-x" : symRoll < 0.20 ? "bilateral-y" : symRoll < 0.25 ? "quad" : "none";
     // ── 3. Focal points + void zones ───────────────────────────────
+    // Rule-of-thirds intersection points for intentional composition
+    const THIRDS_POINTS = [
+        {
+            x: 1 / 3,
+            y: 1 / 3
+        },
+        {
+            x: 2 / 3,
+            y: 1 / 3
+        },
+        {
+            x: 1 / 3,
+            y: 2 / 3
+        },
+        {
+            x: 2 / 3,
+            y: 2 / 3
+        }
+    ];
     const numFocal = 1 + Math.floor(rng() * 2);
     const focalPoints = [];
-    for(let f = 0; f < numFocal; f++)focalPoints.push({
+    for(let f = 0; f < numFocal; f++)// 70% chance to snap to a rule-of-thirds point, 30% free placement
+    if (rng() < 0.7) {
+        const tp = THIRDS_POINTS[Math.floor(rng() * THIRDS_POINTS.length)];
+        // Small jitter around the thirds point so it's not robotic
+        focalPoints.push({
+            x: width * (tp.x + (rng() - 0.5) * 0.08),
+            y: height * (tp.y + (rng() - 0.5) * 0.08),
+            strength: 0.3 + rng() * 0.4
+        });
+    } else focalPoints.push({
         x: width * (0.2 + rng() * 0.6),
         y: height * (0.2 + rng() * 0.6),
         strength: 0.3 + rng() * 0.4
@@ -1369,8 +1571,45 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     function flowAngle(x, y) {
         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;
     }
-    // ── 5. Shape layers ────────────────────────────────────────────
+    // Track all placed shapes for density checks and connecting curves
     const shapePositions = [];
+    // ── 4b. Hero shape — a dominant focal element ───────────────────
+    // ~60% of images get a hero shape anchored at the primary focal point.
+    // It's a large sacred/complex shape that gives the composition a center of gravity.
+    if (rng() < 0.6) {
+        const heroFocal = focalPoints[0];
+        const heroPool = [
+            ...$1f63dc64b5593c73$var$SACRED_SHAPES,
+            "fibonacciSpiral",
+            "merkaba",
+            "fractal"
+        ];
+        const heroShape = heroPool.filter((s)=>shapeNames.includes(s))[Math.floor(rng() * heroPool.filter((s)=>shapeNames.includes(s)).length)] || shapeNames[Math.floor(rng() * shapeNames.length)];
+        const heroSize = adjustedMaxSize * (0.8 + rng() * 0.5);
+        const heroRotation = rng() * 360;
+        const heroFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.05), 0.15 + rng() * 0.2);
+        const heroStroke = (0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.05);
+        ctx.globalAlpha = 0.5 + rng() * 0.2;
+        (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, heroShape, heroFocal.x, heroFocal.y, {
+            fillColor: heroFill,
+            strokeColor: heroStroke,
+            strokeWidth: (1.5 + rng() * 2) * scaleFactor,
+            size: heroSize,
+            rotation: heroRotation,
+            proportionType: "GOLDEN_RATIO",
+            glowRadius: (12 + rng() * 20) * scaleFactor,
+            glowColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(heroStroke, 0.4),
+            gradientFillEnd: (0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.1),
+            renderStyle: rng() < 0.4 ? "watercolor" : "fill-and-stroke",
+            rng: rng
+        });
+        shapePositions.push({
+            x: heroFocal.x,
+            y: heroFocal.y,
+            size: heroSize
+        });
+    }
+    // ── 5. Shape layers ────────────────────────────────────────────
     const densityCheckRadius = Math.min(width, height) * 0.08;
     const maxLocalDensity = Math.ceil(finalConfig.shapesPerLayer * 0.15);
     for(let layer = 0; layer < layers; layer++){
@@ -1409,6 +1648,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             const strokeBase = colors[Math.floor(rng() * colors.length)];
             // Feature D: desaturate colors on later layers for depth
             if (atmosphericDesat > 0) fillBase = (0, $b5a262d09b87e373$export$fb75607d98509d9)(fillBase, atmosphericDesat);
+            // Temperature contrast: shift foreground shapes opposite to background
+            if (fgTempTarget) fillBase = (0, $b5a262d09b87e373$export$51ea55f869b7e0d3)(fillBase, fgTempTarget, 0.15 + layerRatio * 0.1);
             const fillColor = (0, $b5a262d09b87e373$export$59539d800dbe6858)(fillBase, rng, 0.06);
             const strokeColor = (0, $b5a262d09b87e373$export$59539d800dbe6858)(strokeBase, rng, 0.05);
             // Semi-transparent fill
@@ -1506,6 +1747,31 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             prevY = fy;
         }
     }
+    // ── 6b. Apply symmetry mirroring ─────────────────────────────────
+    // Mirror the rendered content (shapes + flow lines) before post-processing.
+    // Uses ctx.canvas which is available in both Node (@napi-rs/canvas) and browsers.
+    if (symmetryMode !== "none") {
+        const canvas = ctx.canvas;
+        ctx.save();
+        if (symmetryMode === "bilateral-x" || symmetryMode === "quad") {
+            // Mirror left half onto right half
+            ctx.save();
+            ctx.translate(width, 0);
+            ctx.scale(-1, 1);
+            // Draw the left half (0 to cx) onto the mirrored right side
+            ctx.drawImage(canvas, 0, 0, Math.ceil(cx), height, 0, 0, Math.ceil(cx), height);
+            ctx.restore();
+        }
+        if (symmetryMode === "bilateral-y" || symmetryMode === "quad") {
+            // Mirror top half onto bottom half
+            ctx.save();
+            ctx.translate(0, height);
+            ctx.scale(1, -1);
+            ctx.drawImage(canvas, 0, 0, width, Math.ceil(cy), 0, 0, width, Math.ceil(cy));
+            ctx.restore();
+        }
+        ctx.restore();
+    }
     // ── 7. Noise texture overlay ───────────────────────────────────
     const noiseRng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(gitHash, 777));
     const noiseDensity = Math.floor(width * height / 800);
@@ -1518,7 +1784,16 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
         ctx.fillStyle = `rgba(${brightness},${brightness},${brightness},1)`;
         ctx.fillRect(nx, ny, 1 * scaleFactor, 1 * scaleFactor);
     }
-    // ── 8. Organic connecting curves ───────────────────────────────
+    // ── 8. Vignette — darken edges to draw the eye inward ───────────
+    ctx.globalAlpha = 1;
+    const vignetteStrength = 0.25 + rng() * 0.2; // 25-45% edge darkening
+    const vigGrad = ctx.createRadialGradient(cx, cy, Math.min(width, height) * 0.3, cx, cy, bgRadius);
+    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)})`);
+    ctx.fillStyle = vigGrad;
+    ctx.fillRect(0, 0, width, height);
+    // ── 9. Organic connecting curves ───────────────────────────────
     if (shapePositions.length > 1) {
         const numCurves = Math.floor(8 * (width * height) / 1048576);
         ctx.lineWidth = 0.8 * scaleFactor;