design-pass-findings.md (6770B)
1 # Design pass — findings against daemon-sec.xyz 2 3 **Date:** 2026-10-03 4 **Status:** findings only. No changes made. Deferred to its own session by the user, who 5 asked for the content passes first. 6 7 The user's note that opened this: *"it does not have the interactive dots, it can use some 8 more work."* So the audit started at the dots and then swept the rest of the component set. 9 10 Source of truth is the implementation at `/Users/daemon1/git/daemon-sec` 11 (`client/src/components/daemon/`, 31 components), not the live DOM, so the port can read the 12 real shader and the real tokens rather than guessing from a screenshot. 13 14 --- 15 16 ## 1. The interactive dots 17 18 `client/src/components/daemon/ambient-signal.tsx` — 716 lines, WebGL, and it is the thing 19 the cheatsheet is missing. Its own docblock describes it as a network map: hosts on an 20 irregular lattice that drift on their own and are pushed away from the pointer, so the field 21 bulges around the cursor and settles when it leaves. Hosts within the cursor's reach lock to 22 the archive's REC red and the links between them light, "so pointing at the page draws an 23 attack path across it." 24 25 Four styles; the site ships `DEFAULT_STYLE = 2`: 26 27 | # | Style | Behaviour | 28 |---|---|---| 29 | 1 | mesh | hairline lattice, probes running the links | 30 | **2** | **constellation** | **dense field of plain dots; links appear only near the cursor, and the cursor reaches out to them** | 31 | 3 | circuit | links routed at right angles, hosts as pads | 32 | 4 | radar | soft hosts that ping as the cursor passes | 33 34 Style 2 is the "interactive dots". 35 36 Properties worth preserving in a port, because each one is a decision the original already 37 paid for: 38 39 - **No palette in the shader.** Ink and accents are read off the canvas's own computed style 40 — the `dawn-*` family for `tone="page"`, the `night-*` set for `tone="plate"` — and 41 re-read on `daemonmodechange`, because a GPU uniform does not inherit a CSS variable. The 42 cheatsheet already dispatches `daemonmodechange` (DESIGN.md lists it under behaviour that 43 must keep working), so this hooks straight in. 44 - **The clearing.** An element carrying `data-index-zone` asks the field to part around it: 45 hosts inside the box are pushed out through the nearest edge, and links, hosts and locks 46 fade to nothing inside. Measured on layout change, never per frame. 47 - **Backing store capped at DPR 1.** Lines are one pixel wide and fragment cost is per 48 pixel. 49 - **Layout never read inside the frame.** Canvas box and clearing come from observers, so a 50 pointer move never forces synchronous layout. 51 - **Motion gating.** Under the ambient switch or `prefers-reduced-motion` the loop does not 52 run — one frame at a fixed phase, redrawn only on resize or mode flip. Also pauses on a 53 hidden tab or when scrolled out of view. With no pointer, the cursor wanders on its own so 54 touch screens still see hosts being walked. 55 - **Degradation.** No WebGL, a lost context, or a shader that will not compile all fall back 56 to `ambient-field.tsx` (CSS: two soft orbs, two tilted orbit rings, a field of drifting 57 dots). 58 59 ### The port problem 60 61 `ambient-signal.tsx` is React. The cheatsheet is Astro with no React and DESIGN.md forbids 62 new dependencies. The shader itself is framework-free and the colour plumbing is already 63 `getComputedStyle` + a window event, so the port is: lift `VERT`/`FRAG` and the uniform 64 wiring into a vanilla module under `src/scripts/`, mount it from an `.astro` component with 65 a `<canvas>`, and drive init/teardown from `astro:page-load` / `astro:before-swap` the way 66 `src/scripts/app.ts` already drives the existing effects. No React, no new dependency. 67 68 What the cheatsheet has today is `SectionBanner.astro`, a 2D canvas reading `--fuzz-*` 69 tokens — the equivalent of daemon-sec's `fuzz-field.tsx`, not of `ambient-signal`. So this 70 is an addition, not a replacement. 71 72 --- 73 74 ## 2. Component inventory 75 76 Already ported, in some form: `Callout`, `Hero`/`HeroLoop`, `Marquee`, `RecordRow`, 77 `SectionBanner` (≈ `fuzz-field`), `SectionHeader`, `Footer`, `SearchModal`, `DomainPlate`, 78 `CategoryNav`, the credit plates. 79 80 Present on daemon-sec, absent here: 81 82 | Component | Lines | What it is | Worth porting? | 83 |---|---|---|---| 84 | `ambient-signal` + `ambient-field` | 716 + 141 | the interactive dots, plus the CSS fallback | **Yes — this is the ask** | 85 | `cursor` | 122 | the dot cursor, restyled for the archive; no glow, since the design has no shadows anywhere | Yes — cheap, and it is a signature | 86 | `reveal` | 120 | scroll-in entrances; one observer for the whole page, picking up anything with `data-reveal` / `data-bar`, including nodes added later | Yes — 280 sheets and long category pages benefit | 87 | `route-progress` | 114 | a plate rule filling across three stage labels, painted at 34% on the first frame because an empty track reads as stalled | Maybe — the cheatsheet already has the view-transition iris; this is the *in-page* progress | 88 | `slant-title` | 217 | the slanted page banner; a black parallelogram with a red offset edge, the shape being what made a section page identifiable at a glance | Strong candidate for category pages | 89 | `command-row` | 87 | one command with a button that copies exactly it — one command per row, never two joined by a newline | Overlaps the existing copy-button work in `app.ts`; compare before porting | 90 | `motion-settings` | 335 | a panel with one switch per animation on the site | Only if the dots land; the ambient switch it reads is this panel's | 91 | `claim-strips` | 162 | full-width strips, each a display-caps claim, a sentence backing it, one link out | Home-page candidate | 92 | `sig-link` | 53 | renders nothing unless the file has a signature that actually verifies — the index is built by running `gpg --verify`, not by looking for an `.asc` | Relevant to the `downloads/` payloads | 93 | `checksum`, `verify-howto` | — | integrity display | Same — pairs with `sig-link` | 94 95 --- 96 97 ## 3. Suggested order for the design session 98 99 1. **`ambient-signal` port** — the explicit ask, and the largest single visual difference. 100 Needs `motion-settings`' ambient switch, or a simpler toggle honouring 101 `prefers-reduced-motion`, to satisfy DESIGN.md's "all motion gated" rule. 102 2. **`reveal`** — one observer, immediate effect across every long page. 103 3. **`cursor`** — small, and signature. 104 4. **`slant-title`** on category pages. 105 5. Everything else on evidence, after the first four are seen side by side. 106 107 Open question for the user before step 1: the dots on **every page**, or only the home hero 108 and category banners? daemon-sec uses `tone="page"` and `tone="plate"` to put the same field 109 behind both cream pages and dark bands, so either is reachable — it is a taste call, not a 110 technical one.