From f7d1620d08ebf2b949cb6ade4152f154399562ce Mon Sep 17 00:00:00 2001
From: Nils Pukropp <nils@narl.io>
Date: Thu, 21 May 2026 04:48:32 +0200
Subject: [PATCH] updated sigil

---
 frontend/src/lib/cybersigil.ts                | 40 +++++++++++++++++--
 .../src/styles/partials/70-cybersigil.css     | 20 ++++++++++
 2 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/cybersigil.ts b/frontend/src/lib/cybersigil.ts
index 795eec0..7f84777 100644
--- a/frontend/src/lib/cybersigil.ts
+++ b/frontend/src/lib/cybersigil.ts
@@ -65,10 +65,25 @@ export function buildCybersigil(opts: SigilOptions = {}): string {
 		const ax = Math.abs(x);
 		if (ax > maxX) maxX = ax;
 	};
-	const emit = (d: string, cls: string) => {
+	const emit = (d: string, cls: string, style?: string) => {
 		if (strokeCount >= MAX_PATHS) return;
+		const s = style ? ` style="${style};--i:${strokeCount % 16}"` : ` style="--i:${strokeCount % 16}"`;
 		parts.push(
-			`<path class="${cls}" d="${d}" pathLength="1" style="--i:${strokeCount % 16}" filter="url(#cs-erosion)"/>`,
+			`<path class="${cls}" d="${d}" pathLength="1"${s} filter="url(#cs-erosion)"/>`,
+		);
+		strokeCount++;
+	};
+
+	const emitRect = (x: number, y: number, sz: number, cls: string) => {
+		parts.push(
+			`<rect x="${n(x)}" y="${n(y)}" width="${n(sz)}" height="${n(sz)}" class="${cls}" style="--i:${strokeCount % 16}"/>`,
+		);
+		strokeCount++;
+	};
+
+	const emitHUD = (d: string, cls: string) => {
+		parts.push(
+			`<path class="${cls}" d="${d}" pathLength="1" style="--i:${strokeCount % 16}"/>`,
 		);
 		strokeCount++;
 	};
@@ -161,7 +176,11 @@ export function buildCybersigil(opts: SigilOptions = {}): string {
 		];
 		const tail: Pt = [Math.max(-2, hook[0] - L * rnd(0.25, 0.45)), hook[1] + rnd(-4, 12)];
 		const pts: Pt[] = [[ox, oy], mid, peak, hook, tail];
-		emit(spline(pts, 5.5), 'cs-sig-main');
+		
+		// Depth shading: background limbs are thinner and fainter
+		const sw = depth === 0 ? 1.6 : 2.6;
+		const op = depth === 0 ? 0.45 : 0.9;
+		emit(spline(pts, 5.5), 'cs-sig-main', `stroke-width:${sw};opacity:${op}`);
 
 		// Bifurcation: split at the mid point with a secondary branch
 		if (depth > 0 && rng() < 0.45) {
@@ -169,7 +188,7 @@ export function buildCybersigil(opts: SigilOptions = {}): string {
 			const bL = L * rnd(0.4, 0.7);
 			const bPeak: Pt = [mid[0] + Math.cos(bAng) * bL, mid[1] + Math.sin(bAng) * bL];
 			const bPts: Pt[] = [mid, bPeak, [bPeak[0] + rnd(-10, 10), bPeak[1] + rnd(10, 20)]];
-			emit(spline(bPts, 4), 'cs-sig-main');
+			emit(spline(bPts, 4), 'cs-sig-main', `stroke-width:${sw * 0.8};opacity:${op}`);
 			if (rng() < 0.3) ornament(bPeak, bAng, 0.6);
 		}
 
@@ -289,6 +308,13 @@ export function buildCybersigil(opts: SigilOptions = {}): string {
 		if (isTangle && rng() < 0.5) {
 			ornament(node, bias, 0.8);
 		}
+
+		if (isTangle) {
+			// Digital Sediment: tiny bit-dust squares at tangle nodes
+			for (let j = 0; j < 6; j++) {
+				emitRect(node[0] + rnd(-12, 12), node[1] + rnd(-12, 12), rnd(1, 3), 'cs-sig-dust');
+			}
+		}
 	}
 
 	// ── Technical Connectors: sparse, straight circuit lines
@@ -308,6 +334,12 @@ export function buildCybersigil(opts: SigilOptions = {}): string {
 		emitText(pt[0] + rnd(4, 12), pt[1] + rnd(-4, 4), pick(symbols), 'cs-sig-text');
 	}
 
+	// ── Calibration HUD: geometric framing arcs and crosshairs
+	const hudR = maxX + PAD * 1.5;
+	emitHUD(`M${n(-hudR)} 0 A${n(hudR)} ${n(hudR)} 0 0 1 ${n(hudR)} 0`, 'cs-sig-hud');
+	emitHUD(`M${n(-hudR)} ${H} A${n(hudR)} ${n(hudR)} 0 0 0 ${n(hudR)} ${H}`, 'cs-sig-hud');
+	emitHUD(`M0 ${n(-PAD)} L0 ${n(H + PAD)}`, 'cs-sig-hud cs-sig-hud--v');
+
 	const half = parts.join('');
 	const minX = -(maxX + PAD);
 	const vbW = 2 * (maxX + PAD);
diff --git a/frontend/src/styles/partials/70-cybersigil.css b/frontend/src/styles/partials/70-cybersigil.css
index 8dc28eb..00b2e5a 100644
--- a/frontend/src/styles/partials/70-cybersigil.css
+++ b/frontend/src/styles/partials/70-cybersigil.css
@@ -265,6 +265,26 @@ html.cybersigil body::after {
   animation: cs-flicker 4s linear infinite;
 }
 
+/* Digital Sediment */
+.cybersigil .cs-sig-dust {
+  fill: var(--sky);
+  opacity: 0.4;
+  filter: drop-shadow(0 0 1px var(--sky));
+}
+
+/* Calibration HUD */
+.cybersigil .cs-sig-hud {
+  fill: none;
+  stroke: var(--sky);
+  stroke-width: 0.3;
+  opacity: 0.12;
+  stroke-dasharray: 2 6;
+}
+.cybersigil .cs-sig-hud--v {
+  stroke-dasharray: 1 15;
+  opacity: 0.08;
+}
+
 /* Stroke-weight tiers — heavy growth, hair filaments, prickly barbs, motifs. */
 .cybersigil .cs-sigil .cs-sig-main { stroke-width: 2.8; }
 .cybersigil .cs-sigil .cs-sig-spine {