Aperture-Topology-Story

Aperture-Topologie-Story

Eine Produktseite, die sich wie ein leises technisches Dokument verhält, aber eine kinematografische Bewegung enthält: Der Leser scrollt in einen Knoten des Netzwerks und die dunkle Seite öffnet sich wie eine Kamera-Blende auf einen hellen Papier-Arbeitsbereich, in dem der eigentliche Workflow des Produkts mit Karten dargestellt wird. Es eignet sich für Tools, deren Wert in einer Pipeline besteht, die man zeigen kann (Eingaben → Quellen/Peers → Ergebnisse → Ausgabe): Inferenz-Meshes, OSINT- und Recherche-Tools, Datenpipelines, CI, Sync-Engines, Paketregister. Es eignet sich nicht für Lifestyle- oder Modemarken.

Die Referenz-Implementierung ist example/index.html: die echte Website für OSINT-Book (ein passives, quellenorientiertes OSINT-Notizbuch für Android und Windows), EN/TR, in den eigenen Farben der App. Detaillierter Code ist in references/components.md; screenshots/ zeigt jeden Abschnitt, jede Story-Phase, Türkisch, reduzierte Bewegung und mobil.

Wenn der Benutzer eine Referenzseite nennt, übernehmen Sie nur deren Stil. Kopieren Sie niemals deren Renderings, Produktnamen, Texte, Logo oder Daten.

1. Vor dem Entwerfen

1. Lesen Sie zuerst die Quellen des Produkts: README, Benutzerhandbuch, Datenschutz-/Bedrohungsmodell, API- oder Quell-Register, Versionshinweise, CHANGELOG. Jede Behauptung auf der Seite verweist auf eine davon. Kopieren Sie Zahlen exakt (Versionen, Dateinamen, Größen, SHA-256, Ports). Wenn zwei Quellen widersprechen (z. B. „22 Module“ vs. eine Tabelle mit 20 Zeilen), zeigen Sie, was die Tabelle beweist.
2. Übernehmen Sie die Farben aus dem Produkt selbst: Launcher-Symbol, Android colors.xml / Compose lightColorScheme und darkColorScheme, Web-CSS-Custom-Properties. Ordnen Sie das dunkle Schema der App dem dunklen Hintergrund zu und das helle Schema dem Blenden-Arbeitsbereich – die Seite wechselt dann buchstäblich von einem Thema der App zum anderen.
3. Finden Sie die Story: Schreiben Sie den Workflow des Produkts als vier Verben (OSINT-Book: Ziel → Erkenntnisse → Analyse → Bericht; ein Inferenz-Mesh: Modell → Scheibe → Platz → Bedienen). Eine Phase pro Verb. Jede Phase braucht eine Überschrift mit ≤ 6 Wörtern.
4. Beispieldaten in der Story müssen offensichtlich Beispiel sein: example.org, Dokumentations-IPs (192.0.2.x, 203.0.113.x), ein „Beispieldaten“-Chip auf jeder Karte. Erfinden Sie niemals Statistiken, Benutzerzahlen, Benchmarks oder Testimonials.
5. Verwenden Sie echte App-Screenshots (WebP, ~800px breit) für den Architektur-Abschnitt.

2. Visuelle DNA

Element	Regel
Dunkler Hintergrund	Fast schwarz, leicht mit der Marke getönt: --bg-2 (Seite) / --bg / --surface / --surface-2 / --surface-3. Ein 36px-Raster aus 1px-Linien bei ~7 % der hellen Tinte über den gesamten Körper. Radiale Glow-Pools (Markenfarbe bei ~13 %, zweites Signal bei ~6 %) hinter dem Helden und der Bühne.
Heller Arbeitsbereich	Der helle Hintergrund der App (--paper) mit einem 34px-Raster bei ~5,5 % Tinte und einer weichen radialen Waschung der Markencontainerfarbe in der Mitte. Nur innerhalb der Blende.
Tinte	Dunkel: --fg / --fg-2 / --muted (muted ≥ 4,5:1 auf dem Grund). Hell: --ink / --ink-2 / --ink-muted.
Marke	Die Produktfarbe für den Zielknoten, Blendenursprung, „Beispieldaten“-Chips, Aufmerksamkeitszustände, aktives Rail-Element, Hover-Rahmen. Auf dunklem Hintergrund den helleren Ton verwenden (--brand-2), auf Papier den tieferen Ton (--brand-ink).
Signale	Zwei weitere Farbtöne, jeder mit einer Bedeutung: Teal = frei / ok / Erkenntnis gefunden; Gold = benötigt einen Schlüssel / optional / fehlt. Abgehende Pakete verwenden die Marke, zurückkehrende Pakete Teal. Schweregrad ist immer Farbe + Symbol + Wort.
Display	Rajdhani 700, Zeilenhöhe .84–.98, Buchstabenabstand 0, Satzfall. Held 2.6–5.2rem mit einem vierschichtigen Glow: 0 0 2px #fff·86%, 0 0 18px brand-2·36%, 0 0 48px teal·14%, 0 18px 52px #000·60%. Auf Papier dieselbe Schriftart mit 0 1px #fff, 0 14px 34px ink·12%.
Fließtext / UI	Geist 400–700, 14–17px.
Beschriftungen	Geist Mono 10–13px: Knotenbeschriftungen, Unterbeschriftungen, Chips, Tabellenquoten, Terminal, Schiene, Augenbrauen (01 / ai analysis, Großbuchstaben + .14em nur hier).
Karten	Dunkle Paneele: 16px Radius, 1px --line-2, vertikaler Verlaufsfläche. Papierkarten: weiß, 14px Radius, 1px warme Linie, 0 14px 34px -14px Schatten. Chips sind Pillen (20px hoch). Ergebniszeilen haben einen 6×18px Verlaufsgriff auf der linken Seite.
Schaltflächen	Primär = fast weiße Füllung mit dunkler Tinte (8px Radius, 40px). Geist = 1px Linie, die bei Hover zu brand-2 wird. Pillen-Schaltflächen in der Navigation tragen ein Mono-Suffix (· web-v0.2.2).
Symbole	24-Raster-Einzelstrich 1.7px Linien-Symbole in einem Inline <symbol> Sprite; dasselbe Sprite wird als <use> im SVG-Graphen verwendet.

3. Abschnittsmuster

1. Sticky-Navigation (64px, durchscheinend dunkel + 16px Unschärfe, unterer Haarstrich) – Icon + zweifarbiges Wortzeichen, kleine Links, GitHub-Pille mit Version, EN/TR-Umschalter, primäre Schaltfläche.
2. Held – Vollbreiten-SVG-Topologie (viewBox 1200×520; Zielknoten in der Mitte mit Heiligenschein + Ring; 5–7 Quellknoten auf gebogenen gestrichelten Kanten, jeder mit einer Mono-Beschriftung und einer Mono-Unterbeschriftung, die den Zugriff angibt: key-free, your key). Die Display-Überschrift sitzt im unteren linken Bereich des Graphen. Darunter: ein Ein-Satz-Vorspann und eine dreispaltige Zeile – „run it“ (ein Befehlschip mit Kopieren + primären/Geist-Download-Schaltflächen + „folgen …“-Link), „what it is“ (fetter erster Satz + Faktenzeile mit farbigen Punkten) und ein kleines Markenabzeichen. Wenn das Produkt eine Hauptfunktion hat, die die Topologie nicht zeigt (OSINT-Book: optionale KI-Analyse), nennen Sie sie im Vorspann und fügen Sie eine Pille darunter ein: ein gefülltes Marken-Tag (AI analysis) + eine Zeile + Pfeil, der zu diesem Abschnitt führt, der dann nach der Story zuerst kommt.
3. Blenden-Story (fixiert, ~640vh) – siehe §4.
4. Integrationsstreifen – Mono-Großbuchstaben-Label links, eine umgebrochene Liste von gepunkteten Namen rechts, Haarlinien oben und unten.
5. Architektur-Umschalter – Abschnittskopf (großer Display-Titel links, Absatz rechts), dann ein dunkles Paneel: eine Tab-Leiste (gefüllte Pille = ausgewählt), eine Textspalte (Titel, ein Absatz, ✓-Liste) und ein Diagramm aus HTML-Knoten über einem SVG von animierten gestrichelten Verbindern (Marke = was verlässt, Teal = was zurückkommt, Gold = optional), dann ein horizontaler Streifen mit echten Screenshots und Mono-Bildunterschriften, dann eine Legende im Footer.
6. Modul-Blöcke – Blöcke mit zwei kleinen „Puzzle-Tabs“ an der Oberkante: Eingabezeile → eine Seite / Mitte / Seite Zeile (Mitte-Block größer, markengetönt, Display-Schriftart) → eine Zeile mit 6 Ausgaben; eine Mono-Notiz darunter.
7. Katalogtabelle – Suchfeld + Mono-beschriftete Auswahlmenüs, eine Tabelle mit Name + Mono-ID, Typ-Pillen, einer Zugriffsspalte mit farbigen Punkten, einer Mono-Quotenspalte, Notizen; Fußzeile mit „Showing x–y von n · Quelltextdatei“ und einem Seitenschalter. Eine <details>-Liste „left out, on purpose“ darunter.
8. Bereichsaufteilung – zwei dunkle Paneele, „Was es tut“ (teales Quadrat) / „Was es nie tut“ (rotes Quadrat), jedes Element ein fetter Einstieg plus ein Satz, linker Haarstrich.
9. Installation – zwei Download-Karten (Icon-Kachel, Name, Mono-Dateiname · Größe), dann ein Terminal-Fenster (Ampeln, Mono-Tabs, COPY, das nur die Befehle kopiert, farbige Eingabeaufforderung / Befehl / Flags / Kommentare / Ausgabe) mit einer Status-Fußzeile (leuchtender Live-Punkt), dann eine ehrliche goldene „Early releases“-Notiz.
10. Fußzeile – Über-Text + Sprach-Pillen, zwei Link-Karten-Listen (Zeilen mit Pfeilen; ↗ extern, → Dokumente), untere Zeile mit Wortzeichen, Versions-Chip und Quellenangabe.

4. Kerninteraktion: die Blenden-Story

Ein section.story (Höhe ≈ 640vh) enthält eine position:sticky; top:0; height:100svh Bühne mit zwei Ebenen:

• Dunkle Ebene – derselbe Topologie-Graph noch einmal, eine Mono-Hinweis (scroll · follow one target) und die Schlusszeile.
• Helle Ebene – clip-path: circle(R at X Y) wobei X/Y die Bildschirmposition des Zielknotens ist (gemessen mit getBoundingClientRect). Im Inneren: vier gestapelte Überschriften (nur eine .on), ein logisches Brett (1120×560 breit, 360×640 schmal) skaliert, um zu passen, und eine Mono-Phasen-Schiene.

Ein einzelner Fortschrittswert p = -rect.top / (story.offsetHeight - innerHeight) treibt alles; jedes Element hat Keyframes [p, {x, y, s, o}] interpoliert mit ease-in-out-cubic und angewendet als translate() scale() + opacity. Zurückscrollen spult exakt zurück.

p	Phase	Was sich bewegt
.015 → .10	Blende öffnet sich	R wächst von 0 zur weitesten Ecke; Hinweis verblasst. Dann clip-path:none.
.00 → .33	1 · Eingabe	Die Eingabekarte steigt ein; ihre Checklistenzeilen werden nacheinander abgehakt (p > .13 + i·.026); schlüsselgesperrte Zeilen bleiben unhaktiert.
.31 → .56	2 · Ergebnisse	Eingabekarte verblasst; die „Notebook“-Karte nimmt ihren Platz ein; sechs Quellkarten erscheinen um sie herum; ein Chip pro Quelle fliegt von seiner Karte in einen Slot im Notebook (st = .37 + i·.024, landet st + .04). Der Lücken-Chip ist gestrichelt.
.56 → .79	3 · Interpretation	Quellkarten schrumpfen zu Punkten; das Notebook gleitet nach links (Chips folgen seiner Transform); drei Beobachtungskarten gleiten von rechts herein; gestrichelte Verbinder zeichnen vom zitierten Chip zu jeder Karte; eine „no verdict“-Pille erscheint.
.79 → .92	4 · Ausgabe	Alles faltet sich in eine Berichtskarte; eine Commit-Karte steigt darunter auf und ihre sechs Streckenpunkte leuchten auf.
.915 → .975	Blende schließt sich	R schrumpft zurück in den Knoten auf 0; die leuchtende Schlusszeile blendet auf der dunklen Ebene ein.

• Es ändern sich nur transform, opacity, clip-path und SVG-Attribute beim Scrollen (ein rAF-throttled Handler).
• Graph-Pakete laufen in einer rAF-Schleife nur, solange ein Graph sichtbar ist, niemals bei reduzierter Bewegung oder in einem versteckten Tab.
• Schmale Bildschirme (< 760px): ein zweites Brett-Layout (Quellen als 3×2-Pillen-Gitter oben, Notebook auf .6 skaliert in Phase 3, Beobachtungen gestapelt, Verbinder ausgeblendet). Gleicher Zeitplan.
• Reduzierte Bewegung (oder ?motion=reduce zur Überprüfung): keine Fixierung, keine Blende; die Story wird als vier statische Papier-Frames dargestellt (das Brett bei p = .30, .55, .78, 1) mit ihren Überschriften.
• Das Brett ist aria-hidden; eine sr-only geordnete Liste erzählt dieselben vier Schritte.

5. Bauregeln

• Eine eigenständige index.html: doctype, charset, viewport, color-scheme: dark, theme-color; Inline-CSS und -JS; Google Fonts (Rajdhani, Geist, Geist Mono) nur; Bilder neben der Seite als WebP; Symbole als Inline-SVG-Sprite.
• Tokens auf :root; jede Farbe der Seite stammt von ihnen (§2). Benennen Sie sie nach Rollen, behalten Sie die Hex-Werte des Produkts.
• i18n: Englisch lebt im HTML (data-i18n-Schlüssel werden einmal als englische Quelle gelesen); andere Sprachen in einem JS-Wörterbuch; von JS erstellte Zeichenketten verwenden T({en, tr}). Persistieren Sie die Wahl in localStorage innerhalb von try/catch. Übersetzen Sie auch Augenbrauen (Großbuchstaben + türkisches Gebietsschema macht „install“ zu „İNSTALL“).
• Barrierefreiheit: AA-Kontrast auf beiden Hintergründen, sichtbarer Fokusring (brand-2), Skip-Link, Tabs mit role=tab, aria-selected, roving tabindex und Pfeiltasten, echte <table> und <details>, Kopierschaltflächen mit Labels.
• Responsiv: ≥1060px volles Layout; <1060px Held-Seiten-Badge versteckt, KI-Raster gestapelt, Editionen gestapelt; <760px eine Spalte, Graph-viewBox beschnitten (150 40 900 480) mit größeren Labels und keinen Unterbeschriftungen, schmales Story-Brett, Diagrammknoten ohne Unterlinien. Kein horizontaler Scroll bei 360px; überprüfen Sie, ob grid-Kinder min-width:0 haben.
• Escapen Sie < und > in jedem Datenstring, den Sie mit innerHTML rendern (http://<server-ip>).

6. Texte schreiben

• Überschriften sind zwei kurze Zeilen, die eine Eigenschaft nennen, kein Versprechen: „Jede Erkenntnis behält ihre Quelle.“ „Zwei Editionen. Ein Dateiformat.“ „KI, die Erkenntnisse liest. Nie umschreibt.“
• Absätze: ein oder zwei schlichte Sätze mit den konkreten Nomen (Ports, Formate, Algorithmen, Dateinamen).
• Grenzen erhalten das gleiche Gewicht wie Funktionen („Was es nie tut“, „Early releases“, „left out, on purpose“).
• Mono-Beschriftungen sind Kleinbuchstaben und knapp (key-free, your key, target · sample, sha-256 3f9a…).

7. Erledigt-Checkliste

• Jede Behauptung, Zahl, Dateiname und Hash stimmen mit den eigenen Dateien des Produkts und der aktuellen Version überein.
• Farb-Tokens stammen aus dem Produkt (Symbol + Hell-/Dunkel-Schemata); Schweregrad niemals allein durch Farbe.
• Story ist in beide Richtungen synchron, Blende öffnet sich vom Knoten und schließt sich zum Knoten, nichts überlappt bei p = .27/.5/.75/.9.
• Schmallayout und reduzierte Bewegungs-Frames lesen sich beide korrekt; Pakete stoßen außerhalb des Bildschirms an.
• Tabs, Seitenschalter, Suche, Filter und Kopierschaltflächen funktionieren mit der Tastatur; Fokus sichtbar.
• EN/TR-Umschalter rendert Brett, Diagramm, Tabelle, Terminal und Augenbrauen neu.
• Kein horizontaler Scroll bei 360/390px; keine Konsolenfehler.
• Screenshots bei 1440×900 und 390×844: node scripts/screenshots.mjs example/index.html screenshots.