git-hash-art 0.2.0 → 0.3.0

package/ALGORITHM.md

@@ -0,0 +1,198 @@
+# Art Generation Algorithm
+
+This document describes the deterministic art generation pipeline used by `git-hash-art`. Every step derives its randomness from the input hash via a seeded mulberry32 PRNG, guaranteeing identical output for identical input.
+
+## Pipeline Overview
+
+```
+Hash String
+  │
+  ├─► Seed (mulberry32 PRNG)
+  │
+  ├─► Color Scheme (analogic + complementary + triadic palettes)
+  │
+  └─► Rendering Pipeline
+       │
+       1. Background Layer
+       2. Composition Mode Selection
+       3. Focal Point Generation
+       4. Flow Field Initialization
+       5. Shape Layers (× N layers)
+       │   ├─ Position (composition mode + focal bias)
+       │   ├─ Shape Selection (layer-weighted)
+       │   ├─ Styling (transparency, glow, gradients, color jitter)
+       │   └─ Recursive Nesting (~15% of large shapes)
+       6. Flow-Line Pass
+       7. Noise Texture Overlay
+       8. Organic Connecting Curves
+```
+
+## 1. Deterministic RNG
+
+All randomness flows from a single **mulberry32** PRNG seeded by hashing the full input string:
+
+```
+seed = hash(gitHash) → mulberry32 state
+rng() → float in [0, 1)
+```
+
+The old approach extracted 2-char hex pairs from the hash (only ~20 unique values in a 40-char hash). Mulberry32 produces a full 32-bit uniform stream from any seed, eliminating correlation artifacts.
+
+## 2. Color Scheme
+
+The `SacredColorScheme` class derives three harmonious palettes from the hash:
+
+| Palette | Method | Purpose |
+|---------|--------|---------|
+| Base (analogic) | `color-scheme` lib, hue = seed % 360 | Primary shape colors |
+| Complementary (mono) | hue = seed + 180° | 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.
+
+### Color Utilities
+
+- **`hexWithAlpha(hex, alpha)`** — converts hex to `rgba()` for transparency
+- **`jitterColor(hex, rng, amount)`** — applies ±amount RGB jitter per channel for organic variation
+- **Positional blending** — shape fill color is biased by canvas position, creating smooth color flow across the image
+
+## 3. Background
+
+A radial gradient fills the canvas from center to corners using two darkened base-scheme colors. This creates depth before any shapes are drawn.
+
+## 4. Composition Modes
+
+The hash deterministically selects one of five composition strategies that control how shapes are positioned on the canvas:
+
+| Mode | Description |
+|------|-------------|
+| **Radial** | Shapes emanate from the center with distance following a power curve (denser near center) |
+| **Flow-field** | Random positions; shapes are rotated to align with a hash-derived vector field |
+| **Spiral** | Shapes follow a multi-turn spiral path outward from center with slight scatter |
+| **Grid-subdivision** | Canvas is divided into cells; shapes are placed randomly within cells |
+| **Clustered** | 3-5 cluster centers are generated; shapes scatter around the nearest cluster |
+
+Each mode produces fundamentally different visual character from the same shape set.
+
+## 5. Focal Points
+
+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.
+
+## 6. Shape Layers
+
+The image is built in N layers (default: 4). Each layer has its own characteristics:
+
+### Layer Properties
+
+| Property | Behavior |
+|----------|----------|
+| Opacity | Decays gently per layer (0.7 → 0.58 → 0.46 → 0.34), minimum 0.15 |
+| Size scale | Later layers use progressively smaller shapes (×0.85, ×0.70, ×0.55) |
+| Shape weights | Early layers favor basic shapes; later layers favor complex/sacred |
+| Per-shape opacity | Additional random jitter (50-100% of layer opacity) |
+
+### Shape Selection (Layer-Weighted)
+
+Shapes are divided into three categories with weights that shift across layers:
+
+| Category | Shapes | Early layers | Late layers |
+|----------|--------|-------------|-------------|
+| **Basic** | circle, square, triangle, hexagon, diamond, cube | High weight | Low weight |
+| **Complex** | star, platonic solid, fibonacci spiral, islamic pattern, celtic knot, merkaba, fractal | Medium | Medium-high |
+| **Sacred** | mandala, flower of life, tree of life, Metatron's cube, Sri Yantra, seed of life, vesica piscis, torus, egg of life | Low | High |
+
+### Size Distribution
+
+Shape sizes follow a **power distribution** (`Math.pow(rng(), 1.8)`) — producing many small shapes and few large ones, which creates natural visual hierarchy.
+
+### Styling Per Shape
+
+Each shape receives:
+
+- **Semi-transparent fill** — alpha between 0.2-0.7, creating watercolor-style blending where shapes overlap
+- **Color jitter** — ±8% RGB variation on fills, ±5% on strokes, so no two shapes using the "same" palette color are pixel-identical
+- **Positional color** — fill color is biased by the shape's canvas position, creating smooth color flow
+- **Glow effect** — 45% of sacred shapes and 20% of others get a `shadowBlur` glow (8-28px scaled), with glow color at 60% opacity
+- **Gradient fill** — ~30% of shapes get a radial gradient between two jittered palette colors instead of a flat fill
+- **Variable stroke width** — 0.5-2.5px scaled to canvas size
+
+### Recursive Nesting
+
+~15% of shapes larger than 40% of max size spawn 1-3 inner shapes:
+- Inner shapes are drawn at the parent's position with small random offsets
+- They use more complex/sacred shape types (layer ratio biased +0.3)
+- Sized at 15-40% of the parent
+- More transparent than the parent layer
+
+## 7. Flow-Line Pass
+
+6-16 flowing curves are drawn across the canvas, following the hash-derived vector field:
+
+- Each line starts at a random position and takes 30-70 steps
+- At each step, direction is determined by the flow field angle at that position plus slight random wobble
+- Lines stop if they leave the canvas bounds
+- Drawn at very low opacity (6-16%) with thin strokes for subtle movement
+
+The flow field is defined by:
+```
+angle(x, y) = baseAngle + sin(x/w × freq × 2π) × π/2 + cos(y/h × freq × 2π) × π/2
+```
+
+## 8. Noise Texture Overlay
+
+A dedicated noise RNG (seeded separately from the main RNG to avoid affecting shape generation) renders thousands of 1px dots across the canvas:
+
+- Density: ~1 dot per 800 square pixels
+- Each dot is either black or white (50/50)
+- Very low opacity (1-4%)
+- Creates subtle film-grain texture that adds organic depth
+
+## 9. Organic Connecting Curves
+
+Quadratic bezier curves connect nearby shapes:
+
+- Number of curves scales with canvas area (~8 per megapixel)
+- Each curve connects two shapes that were drawn near each other in sequence
+- Control points are offset perpendicular to the connecting line with random bulge
+- Drawn at low opacity (6-16%) with palette colors at 30% alpha
+
+## Shape Implementations
+
+### Basic Shapes
+Standard geometric primitives drawn as canvas paths (beginPath → moveTo/lineTo/arc → closePath). The draw pipeline calls `fill()` and `stroke()` after the path is defined.
+
+### Complex Shapes
+More intricate geometry including:
+- **Platonic solids** — 2D projections with all edges drawn between vertices
+- **Fibonacci spiral** — iterative arc segments following the golden ratio
+- **Islamic pattern** — 8-pointed star grid at intersections
+- **Celtic knot** — bezier over/under weaving pattern
+- **Mandala** — concentric circles with radial lines
+- **Fractal tree** — recursive branching at ±30° with 0.7× length decay
+
+### Sacred Geometry
+Mathematically precise sacred geometry patterns:
+- **Flower of Life** — 7 overlapping circles in hexagonal arrangement
+- **Tree of Life** — 10 Sephirot nodes with connecting paths
+- **Metatron's Cube** — 13 vertices (center + inner/outer hexagons) fully connected
+- **Sri Yantra** — 9 interlocking triangles at two radii
+- **Seed of Life** — 7 circles (same as Flower of Life, different scale)
+- **Vesica Piscis** — two overlapping circles
+- **Torus** — 2D projection of a torus via line segments
+- **Egg of Life** — 7 circles in tight hexagonal packing
+
+## Configuration
+
+All parameters are exposed via `GenerationConfig`:
+
+| Parameter | Default | Effect |
+|-----------|---------|--------|
+| `width` | 2048 | Canvas width in pixels |
+| `height` | 2048 | Canvas height in pixels |
+| `gridSize` | 5 | Base shape count = gridSize² × 1.5 |
+| `layers` | 4 | Number of rendering layers |
+| `minShapeSize` | 30 | Minimum shape size (scaled to canvas) |
+| `maxShapeSize` | 400 | Maximum shape size (scaled to canvas) |
+| `baseOpacity` | 0.7 | First layer opacity |
+| `opacityReduction` | 0.12 | Opacity decay per layer |
+| `shapesPerLayer` | auto | Override auto-calculated shape count |

package/CHANGELOG.md

@@ -4,12 +4,20 @@ 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.3.0](https://github.com/gfargo/git-hash-art/compare/0.2.0...0.3.0)
+
+- feat: evolve art generation with composition modes, flow fields, nesting, and texture [`#9`](https://github.com/gfargo/git-hash-art/pull/9)
+- refactor(browser): simplify export statement [`dc193c9`](https://github.com/gfargo/git-hash-art/commit/dc193c972511c5b0eb9e6a781c423aa005453007)
+
 #### [0.2.0](https://github.com/gfargo/git-hash-art/compare/0.1.0...0.2.0)
 
+> 19 March 2026
+
 - feat: add cross-platform browser support [`#8`](https://github.com/gfargo/git-hash-art/pull/8)
 - feat: add visual effects for richer art generation [`#6`](https://github.com/gfargo/git-hash-art/pull/6)
 - fix: improve art generation quality [`#5`](https://github.com/gfargo/git-hash-art/pull/5)
 - docs: update README to reflect current algorithm and features [`15879c6`](https://github.com/gfargo/git-hash-art/commit/15879c62480a2d418c4ef8dcb479d912a7160345)
+- chore: release v0.2.0 [`6867e06`](https://github.com/gfargo/git-hash-art/commit/6867e067f6dda0f4a4fd444b412772ddecb01555)
 - fix(shapes): handle missing shape type default [`860bfd3`](https://github.com/gfargo/git-hash-art/commit/860bfd36caab97d6ed44dd441ea1a995863b6068)
 
 #### [0.1.0](https://github.com/gfargo/git-hash-art/compare/0.0.4...0.1.0)

package/dist/browser.js

@@ -8,9 +8,18 @@ import $4wRzV$colorscheme from "color-scheme";
  */ /**
  * Pure rendering logic — environment-agnostic.
  *
- * This module only uses the standard CanvasRenderingContext2D API,
- * so it works identically in Node (@napi-rs/canvas) and browsers
- * (HTMLCanvasElement).
+ * Uses only the standard CanvasRenderingContext2D API so it works
+ * identically in Node (@napi-rs/canvas) and browsers.
+ *
+ * Generation pipeline:
+ *   1. Background — radial gradient from hash-derived dark palette
+ *   2. Composition mode — hash selects: radial, flow-field, spiral, grid-subdivision, or clustered
+ *   3. Color field — smooth positional color blending across the canvas
+ *   4. Shape layers — weighted selection, focal-point placement, transparency, glow, gradients, jitter
+ *   5. Recursive nesting — some shapes contain smaller shapes inside
+ *   6. Flow-line pass — bezier curves following a hash-derived vector field
+ *   7. Noise texture overlay — subtle grain for organic feel
+ *   8. Organic connecting curves — beziers between nearby shapes
  */ 
  // declare module 'color-scheme';
 
@@ -1025,6 +1034,138 @@ function $e0f99502ff383dd8$export$bb35a6995ddbf32d(ctx, shape, x, y, config) {
 };
 
 
+// ── Shape categories for weighted selection ─────────────────────────
+const $1f63dc64b5593c73$var$BASIC_SHAPES = [
+    "circle",
+    "square",
+    "triangle",
+    "hexagon",
+    "diamond",
+    "cube"
+];
+const $1f63dc64b5593c73$var$COMPLEX_SHAPES = [
+    "star",
+    "jacked-star",
+    "heart",
+    "platonicSolid",
+    "fibonacciSpiral",
+    "islamicPattern",
+    "celticKnot",
+    "merkaba",
+    "fractal"
+];
+const $1f63dc64b5593c73$var$SACRED_SHAPES = [
+    "mandala",
+    "flowerOfLife",
+    "treeOfLife",
+    "metatronsCube",
+    "sriYantra",
+    "seedOfLife",
+    "vesicaPiscis",
+    "torus",
+    "eggOfLife"
+];
+const $1f63dc64b5593c73$var$COMPOSITION_MODES = [
+    "radial",
+    "flow-field",
+    "spiral",
+    "grid-subdivision",
+    "clustered"
+];
+// ── Helper: pick shape with layer-aware weighting ───────────────────
+function $1f63dc64b5593c73$var$pickShape(rng, layerRatio, shapeNames) {
+    const basicW = 1 - layerRatio * 0.6;
+    const complexW = 0.3 + layerRatio * 0.3;
+    const sacredW = 0.1 + layerRatio * 0.4;
+    const total = basicW + complexW + sacredW;
+    const roll = rng() * total;
+    let pool;
+    if (roll < basicW) pool = $1f63dc64b5593c73$var$BASIC_SHAPES;
+    else if (roll < basicW + complexW) pool = $1f63dc64b5593c73$var$COMPLEX_SHAPES;
+    else pool = $1f63dc64b5593c73$var$SACRED_SHAPES;
+    const available = pool.filter((s)=>shapeNames.includes(s));
+    if (available.length === 0) return shapeNames[Math.floor(rng() * shapeNames.length)];
+    return available[Math.floor(rng() * available.length)];
+}
+// ── Helper: simple 2D value noise (hash-seeded) ─────────────────────
+function $1f63dc64b5593c73$var$valueNoise(x, y, scale, rng) {
+    // Cheap pseudo-noise: combine sin waves at different frequencies
+    const nx = x / scale;
+    const ny = y / scale;
+    return (Math.sin(nx * 1.7 + ny * 2.3 + rng() * 0.001) * 0.5 + Math.sin(nx * 3.1 - ny * 1.9 + rng() * 0.001) * 0.3 + Math.sin(nx * 5.3 + ny * 4.7 + rng() * 0.001) * 0.2) * 0.5 + 0.5;
+}
+// ── Helper: get position based on composition mode ──────────────────
+function $1f63dc64b5593c73$var$getCompositionPosition(mode, rng, width, height, shapeIndex, totalShapes, cx, cy) {
+    switch(mode){
+        case "radial":
+            {
+                const angle = rng() * Math.PI * 2;
+                const maxR = Math.min(width, height) * 0.45;
+                const r = Math.pow(rng(), 0.7) * maxR;
+                return {
+                    x: cx + Math.cos(angle) * r,
+                    y: cy + Math.sin(angle) * r
+                };
+            }
+        case "spiral":
+            {
+                const t = shapeIndex / totalShapes;
+                const turns = 3 + rng() * 2;
+                const angle = t * Math.PI * 2 * turns;
+                const maxR = Math.min(width, height) * 0.42;
+                const r = t * maxR + (rng() - 0.5) * maxR * 0.15;
+                return {
+                    x: cx + Math.cos(angle) * r,
+                    y: cy + Math.sin(angle) * r
+                };
+            }
+        case "grid-subdivision":
+            {
+                const cells = 3 + Math.floor(rng() * 3);
+                const cellW = width / cells;
+                const cellH = height / cells;
+                const gx = Math.floor(rng() * cells);
+                const gy = Math.floor(rng() * cells);
+                return {
+                    x: gx * cellW + rng() * cellW,
+                    y: gy * cellH + rng() * cellH
+                };
+            }
+        case "clustered":
+            {
+                // Pick one of 3-5 cluster centers, then scatter around it
+                const numClusters = 3 + Math.floor(rng() * 3);
+                const ci = Math.floor(rng() * numClusters);
+                // Deterministic cluster center from index
+                const clusterRng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(String(ci), 999));
+                const clx = width * (0.15 + clusterRng() * 0.7);
+                const cly = height * (0.15 + clusterRng() * 0.7);
+                const spread = Math.min(width, height) * 0.18;
+                return {
+                    x: clx + (rng() - 0.5) * spread * 2,
+                    y: cly + (rng() - 0.5) * spread * 2
+                };
+            }
+        case "flow-field":
+        default:
+            // Random position, will be adjusted by flow field direction later
+            return {
+                x: rng() * width,
+                y: rng() * height
+            };
+    }
+}
+// ── Helper: positional color blending ───────────────────────────────
+function $1f63dc64b5593c73$var$getPositionalColor(x, y, width, height, colors, rng) {
+    // Blend between palette colors based on position
+    const nx = x / width;
+    const ny = y / height;
+    // Use position to bias which palette color is chosen
+    const posIndex = (nx * 0.6 + ny * 0.4) * (colors.length - 1);
+    const baseIdx = Math.floor(posIndex) % colors.length;
+    // Then jitter it slightly
+    return (0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[baseIdx], rng, 0.08);
+}
 function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     const finalConfig = {
         ...(0, $81c1b644006d48ec$export$c2f8e0cc249a8d8f),
@@ -1032,61 +1173,167 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
     };
     const { width: width, height: height, gridSize: gridSize, layers: layers, minShapeSize: minShapeSize, maxShapeSize: maxShapeSize, baseOpacity: baseOpacity, opacityReduction: opacityReduction } = finalConfig;
     finalConfig.shapesPerLayer = finalConfig.shapesPerLayer || Math.floor(gridSize * gridSize * 1.5);
-    // --- Color scheme derived from hash ---
     const colorScheme = new (0, $b5a262d09b87e373$export$ab958c550f521376)(gitHash);
     const colors = colorScheme.getColors();
     const [bgStart, bgEnd] = colorScheme.getBackgroundColors();
-    // --- Radial gradient background for depth ---
-    const cx = width / 2;
-    const cy = height / 2;
-    const bgRadius = Math.hypot(cx, cy);
-    const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, bgRadius);
-    gradient.addColorStop(0, bgStart);
-    gradient.addColorStop(1, bgEnd);
-    ctx.fillStyle = gradient;
-    ctx.fillRect(0, 0, width, height);
     const shapeNames = Object.keys((0, $e41b41d8dcf837ad$export$4ff7fc6f1af248b5));
     const scaleFactor = Math.min(width, height) / 1024;
     const adjustedMinSize = minShapeSize * scaleFactor;
     const adjustedMaxSize = maxShapeSize * scaleFactor;
-    // One master RNG seeded from the full hash — all randomness flows from here
     const rng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(gitHash));
-    // Track shape positions for organic connecting curves later
+    const cx = width / 2;
+    const cy = height / 2;
+    // ── 1. Background ──────────────────────────────────────────────
+    const bgRadius = Math.hypot(cx, cy);
+    const bgGrad = ctx.createRadialGradient(cx, cy, 0, cx, cy, bgRadius);
+    bgGrad.addColorStop(0, bgStart);
+    bgGrad.addColorStop(1, bgEnd);
+    ctx.fillStyle = bgGrad;
+    ctx.fillRect(0, 0, width, height);
+    // ── 2. Composition mode ────────────────────────────────────────
+    const compositionMode = $1f63dc64b5593c73$var$COMPOSITION_MODES[Math.floor(rng() * $1f63dc64b5593c73$var$COMPOSITION_MODES.length)];
+    // ── 3. Focal points ────────────────────────────────────────────
+    const numFocal = 1 + Math.floor(rng() * 2);
+    const focalPoints = [];
+    for(let f = 0; f < numFocal; f++)focalPoints.push({
+        x: width * (0.2 + rng() * 0.6),
+        y: height * (0.2 + rng() * 0.6),
+        strength: 0.3 + rng() * 0.4
+    });
+    function applyFocalBias(rx, ry) {
+        let nearest = focalPoints[0];
+        let minDist = Infinity;
+        for (const fp of focalPoints){
+            const d = Math.hypot(rx - fp.x, ry - fp.y);
+            if (d < minDist) {
+                minDist = d;
+                nearest = fp;
+            }
+        }
+        const pull = nearest.strength * rng() * 0.5;
+        return [
+            rx + (nearest.x - rx) * pull,
+            ry + (nearest.y - ry) * pull
+        ];
+    }
+    // ── 4. Flow field seed values (for flow-field mode & line pass) ─
+    const fieldAngleBase = rng() * Math.PI * 2;
+    const fieldFreq = 0.5 + rng() * 2;
+    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 ────────────────────────────────────────────
     const shapePositions = [];
     for(let layer = 0; layer < layers; layer++){
+        const layerRatio = layers > 1 ? layer / (layers - 1) : 0;
         const numShapes = finalConfig.shapesPerLayer + Math.floor(rng() * finalConfig.shapesPerLayer * 0.3);
-        // Layer opacity decays gently so all layers remain visible
         const layerOpacity = Math.max(0.15, baseOpacity - layer * opacityReduction);
-        // Later layers use smaller shapes for depth
         const layerSizeScale = 1 - layer * 0.15;
         for(let i = 0; i < numShapes; i++){
-            const x = rng() * width;
-            const y = rng() * height;
-            const shapeIdx = Math.floor(rng() * shapeNames.length);
-            const shape = shapeNames[shapeIdx];
-            // Shape size follows a power distribution — many small, few large
+            // Position from composition mode, then focal bias
+            const rawPos = $1f63dc64b5593c73$var$getCompositionPosition(compositionMode, rng, width, height, i, numShapes, cx, cy);
+            const [x, y] = applyFocalBias(rawPos.x, rawPos.y);
+            // Weighted shape selection
+            const shape = $1f63dc64b5593c73$var$pickShape(rng, layerRatio, shapeNames);
+            // Power distribution for size
             const sizeT = Math.pow(rng(), 1.8);
             const size = (adjustedMinSize + sizeT * (adjustedMaxSize - adjustedMinSize)) * layerSizeScale;
-            const rotation = rng() * 360;
-            const fillColor = colors[Math.floor(rng() * colors.length)];
-            const strokeColor = colors[Math.floor(rng() * colors.length)];
+            // Flow-field rotation in flow-field mode, random otherwise
+            const rotation = compositionMode === "flow-field" ? flowAngle(x, y) * 180 / Math.PI + (rng() - 0.5) * 30 : rng() * 360;
+            // Positional color blending + jitter
+            const fillBase = $1f63dc64b5593c73$var$getPositionalColor(x, y, width, height, colors, rng);
+            const strokeBase = colors[Math.floor(rng() * colors.length)];
+            const fillColor = (0, $b5a262d09b87e373$export$59539d800dbe6858)(fillBase, rng, 0.06);
+            const strokeColor = (0, $b5a262d09b87e373$export$59539d800dbe6858)(strokeBase, rng, 0.05);
+            // Semi-transparent fill
+            const fillAlpha = 0.2 + rng() * 0.5;
+            const transparentFill = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, fillAlpha);
             const strokeWidth = (0.5 + rng() * 2.0) * scaleFactor;
             ctx.globalAlpha = layerOpacity * (0.5 + rng() * 0.5);
+            // Glow on sacred shapes more often
+            const isSacred = $1f63dc64b5593c73$var$SACRED_SHAPES.includes(shape);
+            const glowChance = isSacred ? 0.45 : 0.2;
+            const hasGlow = rng() < glowChance;
+            const glowRadius = hasGlow ? (8 + rng() * 20) * scaleFactor : 0;
+            // Gradient fill on ~30%
+            const hasGradient = rng() < 0.3;
+            const gradientEnd = hasGradient ? (0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.1) : undefined;
             (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, shape, x, y, {
-                fillColor: fillColor,
+                fillColor: transparentFill,
                 strokeColor: strokeColor,
                 strokeWidth: strokeWidth,
                 size: size,
                 rotation: rotation,
-                proportionType: "GOLDEN_RATIO"
+                proportionType: "GOLDEN_RATIO",
+                glowRadius: glowRadius,
+                glowColor: hasGlow ? (0, $b5a262d09b87e373$export$f2121afcad3d553f)(fillColor, 0.6) : undefined,
+                gradientFillEnd: gradientEnd
             });
             shapePositions.push({
                 x: x,
-                y: y
+                y: y,
+                size: size
             });
+            // ── 5b. Recursive nesting: ~15% of larger shapes get inner shapes ──
+            if (size > adjustedMaxSize * 0.4 && rng() < 0.15) {
+                const innerCount = 1 + Math.floor(rng() * 3);
+                for(let n = 0; n < innerCount; n++){
+                    const innerShape = $1f63dc64b5593c73$var$pickShape(rng, Math.min(1, layerRatio + 0.3), shapeNames);
+                    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 = (0, $b5a262d09b87e373$export$f2121afcad3d553f)((0, $b5a262d09b87e373$export$59539d800dbe6858)(colors[Math.floor(rng() * colors.length)], rng, 0.1), 0.3 + rng() * 0.4);
+                    ctx.globalAlpha = layerOpacity * 0.7;
+                    (0, $e0f99502ff383dd8$export$bb35a6995ddbf32d)(ctx, innerShape, x + innerOffX, y + innerOffY, {
+                        fillColor: innerFill,
+                        strokeColor: (0, $b5a262d09b87e373$export$f2121afcad3d553f)(strokeColor, 0.5),
+                        strokeWidth: strokeWidth * 0.6,
+                        size: innerSize,
+                        rotation: innerRot,
+                        proportionType: "GOLDEN_RATIO"
+                    });
+                }
+            }
         }
     }
-    // --- Organic connecting curves between nearby shapes ---
+    // ── 6. Flow-line pass ──────────────────────────────────────────
+    // Draw flowing curves that follow the hash-derived vector field
+    const numFlowLines = 6 + Math.floor(rng() * 10);
+    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;
+        ctx.globalAlpha = 0.06 + rng() * 0.1;
+        ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colors[Math.floor(rng() * colors.length)], 0.4);
+        ctx.lineWidth = (0.5 + rng() * 1.5) * scaleFactor;
+        ctx.beginPath();
+        ctx.moveTo(fx, fy);
+        for(let s = 0; s < steps; s++){
+            const angle = flowAngle(fx, fy) + (rng() - 0.5) * 0.3;
+            fx += Math.cos(angle) * stepLen;
+            fy += Math.sin(angle) * stepLen;
+            // Stay in bounds
+            if (fx < 0 || fx > width || fy < 0 || fy > height) break;
+            ctx.lineTo(fx, fy);
+        }
+        ctx.stroke();
+    }
+    // ── 7. Noise texture overlay ───────────────────────────────────
+    // Subtle grain rendered as tiny semi-transparent dots
+    const noiseRng = (0, $616009579e3d72c5$export$eaf9227667332084)((0, $616009579e3d72c5$export$e9cc707de01b7042)(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);
+    }
+    // ── 8. Organic connecting curves ───────────────────────────────
     if (shapePositions.length > 1) {
         const numCurves = Math.floor(8 * (width * height) / 1048576);
         ctx.lineWidth = 0.8 * scaleFactor;
@@ -1104,8 +1351,8 @@ function $1f63dc64b5593c73$export$29a844702096332e(ctx, gitHash, config = {}) {
             const bulge = (rng() - 0.5) * dist * 0.4;
             const cpx = mx + -dy / (dist || 1) * bulge;
             const cpy = my + dx / (dist || 1) * bulge;
-            ctx.globalAlpha = 0.08 + rng() * 0.12;
-            ctx.strokeStyle = colors[Math.floor(rng() * colors.length)];
+            ctx.globalAlpha = 0.06 + rng() * 0.1;
+            ctx.strokeStyle = (0, $b5a262d09b87e373$export$f2121afcad3d553f)(colors[Math.floor(rng() * colors.length)], 0.3);
             ctx.beginPath();
             ctx.moveTo(a.x, a.y);
             ctx.quadraticCurveTo(cpx, cpy, b.x, b.y);