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(
- ``,
+ ``,
+ );
+ strokeCount++;
+ };
+
+ const emitRect = (x: number, y: number, sz: number, cls: string) => {
+ parts.push(
+ ``,
+ );
+ strokeCount++;
+ };
+
+ const emitHUD = (d: string, cls: string) => {
+ parts.push(
+ ``,
);
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 {