smyrna-pergamum/aperture-topology-story

Aperture topology story

Une page produit qui se comporte comme un document d'ingénierie discret avec un seul mouvement cinématographique : le lecteur défile dans un nœud du réseau et la page sombre s'ouvre comme un iris d'appareil photo sur un espace de travail lumineux en papier où le workflow réel du produit est joué avec des cartes. Cela convient aux outils dont la valeur est un pipeline que l'on peut montrer (entrées → sources/pairs → résultats → sortie) : maillages d'inférence, outils OSINT et de recherche, pipelines de données, CI, moteurs de synchronisation, registres de paquets. Cela ne convient pas aux marques de style de vie ou de mode.

La build de référence est example/index.html : le site réel pour OSINT-Book (un notebook OSINT passif et axé sur les sources pour Android et Windows), EN/TR, dans les propres couleurs de l'application. Le code détaillé se trouve dans references/components.md ; screenshots/ montre chaque section, chaque phase de l'histoire, le turc, le mouvement réduit et le mobile.

Si l'utilisateur nomme un site de référence, ne prenez que son style. Ne copiez jamais ses rendus, noms de produits, textes, logo ou données.

1. Avant la conception

1. Lisez d'abord les sources du produit : README, guide utilisateur, modèle de confidentialité/menaces, API ou registre source, notes de version, CHANGELOG. Chaque affirmation sur la page correspond à l'une d'elles. Copiez les chiffres exactement (versions, noms de fichiers, tailles, SHA-256, ports). Si deux sources divergent (par exemple « 22 modules » contre un tableau de 20 lignes), montrez ce que prouve le tableau.
2. Prenez les couleurs du produit lui-même : icône du lanceur, colors.xml Android / lightColorScheme et darkColorScheme Compose, propriétés CSS personnalisées du web. Mappez le thème sombre de l'application au fond sombre et son thème clair à l'espace de travail de l'iris — la page bascule alors littéralement d'un thème de l'application à l'autre.
3. Trouvez l'histoire : écrivez le workflow du produit sous forme de quatre verbes (OSINT-Book : cible → résultats → analyse → rapport ; un maillage d'inférence : modèle → tranche → place → sert). Une phase par verbe. Chaque phase nécessite un titre de ≤ 6 mots.
4. Les exemples de données dans l'histoire doivent être manifestement des exemples : example.org, adresses IP de documentation (192.0.2.x, 203.0.113.x), une étiquette « sample data » sur chaque carte. N'inventez jamais de statistiques, de nombres d'utilisateurs, de benchmarks ou de témoignages.
5. Utilisez de vraies captures d'écran de l'application (WebP, ~800px de large) pour la section architecture.

2. ADN visuel

Élément	Règle
Fond sombre	Noir presque pur, légèrement teinté de la marque : --bg-2 (page) / --bg / --surface / --surface-2 / --surface-3. Une grille de 36px avec des lignes de 1px à ~7% de l'encre claire sur tout le corps. Des lueurs radiales (couleur de la marque à ~13%, second signal à ~6%) derrière le héros et la scène.
Espace de travail clair	Le fond clair de l'application (--paper) avec une grille de 34px à ~5.5% d'encre et un lavis radial doux de la couleur du conteneur de la marque au milieu. Uniquement à l'intérieur de l'iris.
Encre	Sombre : --fg / --fg-2 / --muted (muted ≥ 4.5:1 sur le fond). Clair : --ink / --ink-2 / --ink-muted.
Marque	La couleur du produit pour le nœud cible, l'origine de l'iris, les étiquettes « sample data », les états Attention, l'élément de rail actif, les bordures au survol. En sombre, utilisez le ton plus clair (--brand-2), sur le papier le ton plus profond (--brand-ink).
Signaux	Deux nuances supplémentaires, chacune avec une signification : sarcelle = gratuit / OK / résultat trouvé ; or = nécessite une clé / optionnel / manquant. Les paquets sortants utilisent la marque, les paquets de retour la sarcelle. La sévérité est toujours couleur + icône + mot.
Affichage	Rajdhani 700, hauteur de ligne .84–.98, espacement des lettres 0, casse de phrase. Héros 2.6–5.2rem avec une lueur à quatre couches : 0 0 2px #fff·86%, 0 0 18px brand-2·36%, 0 0 48px teal·14%, 0 18px 52px #000·60%. Sur le papier, la même police avec 0 1px #fff, 0 14px 34px ink·12%.
Corps / UI	Geist 400–700, 14–17px.
Étiquettes	Geist Mono 10–13px : étiquettes de nœuds, sous-étiquettes, étiquettes, quotas de tableau, terminal, rail, sourcils (01 / ai analysis, majuscule + .14em uniquement ici).
Cartes	Panneaux sombres : rayon de 16px, 1px --line-2, surface dégradée verticale. Cartes en papier : blanches, rayon de 14px, ligne chaude de 1px, ombre 0 14px 34px -14px. Les étiquettes sont des pilules (20px de haut). Les lignes de résultats ont une poignée dégradée de 6×18px à gauche.
Boutons	Primaire = remplissage quasi blanc avec encre foncée (rayon 8px, 40px). Fantôme = ligne de 1px qui devient brand-2 au survol. Les boutons pilules dans la navigation portent un suffixe mono (· web-v0.2.2).
Icônes	Icônes à un seul trait de 1.7px sur une grille de 24 dans un sprite <symbol> en ligne ; le même sprite est utilisé par <use> dans le graphique SVG.

3. Modèles de sections

1. Navigation collante (64px, sombre translucide + flou 16px, ligne inférieure fine) – icône + mot-symbole bicolore, petits liens, pilule GitHub avec version, bascule EN/TR, bouton primaire.
2. Héros – topologie SVG pleine largeur (viewBox 1200×520 ; nœud cible au milieu avec halo + anneau ; 5–7 nœuds sources sur des arêtes courbes en pointillés, chacun avec une étiquette mono et une sous-étiquette mono indiquant l'accès : key-free, your key). Le titre d'affichage se trouve en bas à gauche du graphique. En dessous : une phrase d'accroche et une ligne à trois colonnes – « exécutez-le » (une étiquette de commande avec copie + boutons de téléchargement primaire/fantôme + lien « suivez … »), « ce que c'est » (première phrase en gras + ligne de faits avec points colorés) et un petit badge de marque. Si le produit a une fonctionnalité phare que la topologie ne montre pas (OSINT-Book : analyse AI optionnelle), nommez-la dans l'accroche et ajoutez une pilule en dessous : une étiquette de marque remplie (AI analysis) + une ligne + flèche, liant à cette section, qui vient alors en premier après l'histoire.
3. Histoire de l'iris (épinglée, ~640vh) – voir §4.
4. Bande d'intégration – étiquette mono en majuscule à gauche, liste enveloppée de noms en pointillés à droite, lignes fines au-dessus et en dessous.
5. Sélecteur d'architecture – en-tête de section (grand titre d'affichage à gauche, paragraphe à droite), puis un panneau sombre : une liste d'onglets (pilule remplie = sélectionnée), une colonne de texte (titre, un paragraphe, liste ✓) et un diagramme de nœuds HTML sur un SVG de connecteurs animés en pointillés (marque = ce qui part, sarcelle = ce qui revient, or = optionnel), puis une bande horizontale de vraies captures d'écran avec légendes mono, puis un pied de page de légende.
6. Blocs de modules – blocs avec deux petites « languettes de puzzle » sur le bord supérieur : ligne d'entrées → une ligne latérale/centrale/latérale (bloc central plus grand, teinté de la marque, police d'affichage) → une ligne de 6 sorties ; une note mono en dessous.
7. Tableau de catalogue – champ de recherche + sélecteurs étiquetés en mono, un tableau avec nom + id mono, pilules de type, une colonne d'accès avec points colorés, une colonne de quota mono, notes ; pied de page avec « Affichage x–y sur n · fichier source » et un paginateur. Une liste <details> « laissé de côté, à dessein » en dessous.
8. Division du périmètre – deux panneaux sombres, « Ce qu'il fait » (carré sarcelle) / « Ce qu'il ne fait jamais » (carré rouge), chaque élément avec une accroche en gras plus une phrase, ligne fine à gauche.
9. Installation – deux cartes de téléchargement (vignette d'icône, nom, nom de fichier mono · taille), puis une fenêtre de terminal (feux de signalisation, onglets mono, COPY qui copie uniquement les commandes, invite / commande / drapeaux / commentaires / sortie colorés) avec un pied de page d'état (point lumineux en direct), puis une note honnête en or « Early releases ».
10. Pied de page – texte à propos + pilules de langue, deux listes de cartes liens (lignes avec flèches ; ↗ externe, → documents), ligne du bas avec mot-symbole, étiquette de version et ligne d'attribution.

4. Interaction signature : l'histoire de l'iris

Une section.story (hauteur ≈ 640vh) contient une scène position:sticky; top:0; height:100svh avec deux couches :

• Couche sombre – le même graphique de topologie, un indice mono (scroll · follow one target), et la ligne de fermeture.
• Couche claire – clip-path: circle(R at X Y) où X/Y est la position à l'écran du nœud cible (mesurée avec getBoundingClientRect). À l'intérieur : quatre titres empilés (un seul .on), un plateau logique (1120×560 large, 360×640 étroit) mis à l'échelle pour s'adapter, et un rail de phase mono.

Une seule valeur de progression p = -rect.top / (story.offsetHeight - innerHeight) pilote tout ; chaque élément a des images clés [p, {x, y, s, o}] interpolées avec ease-in-out-cubic et appliquées comme translate() scale() + opacity. Revenir en arrière rembobine exactement.

p	Phase	Ce qui bouge
.015 → .10	Ouverture de l'iris	R passe de 0 au coin le plus éloigné ; l'indice disparaît. Puis clip-path:none.
.00 → .33	1 · entrée	La carte d'entrée s'élève ; ses lignes de checklist se cochent une par une (p > .13 + i·.026) ; les lignes verrouillées par clé restent non cochées.
.31 → .56	2 · résultats	La carte d'entrée disparaît ; la carte « notebook » prend sa place ; six cartes sources apparaissent autour d'elle ; une étiquette par source vole de sa carte vers un emplacement dans le notebook (st = .37 + i·.024, atterrit st + .04). L'étiquette manquante est en pointillés.
.56 → .79	3 · interprétation	Les cartes sources rétrécissent en points ; le notebook glisse à gauche (les étiquettes suivent sa transformation) ; trois cartes d'observation glissent depuis la droite ; des connecteurs en pointillés relient l'étiquette citée à chaque carte ; une pilule « no verdict » apparaît.
.79 → .92	4 · sortie	Tout se replie en une seule carte de rapport ; une carte de commit s'élève en dessous et ses six points de route s'allument.
.915 → .975	Fermeture de l'iris	R rétrécit à 0 en retournant au nœud ; la ligne de fermeture lumineuse apparaît sur la couche sombre.

• Seuls transform, opacity, clip-path et les attributs SVG changent pendant le défilement (un gestionnaire rAF limité).
• Les paquets du graphique s'exécutent dans une boucle rAF uniquement lorsqu'un graphique est à l'écran, jamais avec un mouvement réduit ou un onglet caché.
• Écrans étroits (< 760px) : une deuxième disposition du plateau (sources sous forme de grille de pilules 3×2 en haut, notebook réduit à .6 en phase 3, observations empilées, connecteurs masqués). Même chronologie.
• Mouvement réduit (ou ?motion=reduce pour la revue) : pas d'épinglage, pas d'iris ; l'histoire s'affiche sous forme de quatre cadres papier statiques (le plateau à p = .30, .55, .78, 1) avec leurs titres.
• Le plateau est aria-hidden ; une liste ordonnée sr-only raconte les quatre mêmes étapes.

5. Règles de construction

• Un seul index.html autonome : doctype, charset, viewport, color-scheme: dark, theme-color ; CSS et JS embarqués ; Google Fonts (Rajdhani, Geist, Geist Mono) uniquement ; images à côté de la page en WebP ; icônes dans un sprite SVG en ligne.
• Jetons sur :root ; chaque couleur de la page en provient (§2). Nommez-les d'après leurs rôles, conservez les valeurs hexadécimales du produit.
• i18n : l'anglais vit dans le HTML (les clés data-i18n sont lues une fois comme source anglaise) ; les autres langues dans un dictionnaire JS ; les chaînes construites par JS utilisent T({en, tr}). Persistez le choix dans localStorage à l'aide d'un try/catch. Traduisez aussi les sourcils (majuscule + locale turque transforme « install » en « İNSTALL »).
• Accessibilité : contraste AA sur les deux fonds, anneau de focus visible (brand-2), lien d'évitement, onglets avec role=tab, aria-selected, roving tabindex et touches fléchées, vrai <table> et <details>, boutons de copie avec étiquettes.
• Responsive : ≥1060px disposition complète ; <1060px badge latéral du héros masqué, grille AI empilée, éditions empilées ; <760px une colonne, viewBox du graphique recadrée (150 40 900 480) avec des étiquettes plus grandes et sans sous-étiquettes, plateau d'histoire étroit, nœuds du diagramme sans sous-lignes. Pas de défilement horizontal à 360px ; vérifiez que les enfants grid ont min-width:0.
• Échappez < et > dans toute chaîne de données que vous rendez avec innerHTML (http://<server-ip>).

6. Rédaction des textes

• Les titres sont deux lignes courtes qui énoncent une propriété, pas une promesse : « Every finding keeps its source. » « Two editions. One file format. » « AI that reads findings. Never rewrites them. »
• Paragraphes : une ou deux phrases simples avec les noms concrets (ports, formats, algorithmes, noms de fichiers).
• Les limites reçoivent le même poids que les fonctionnalités (« What it never does », « Early releases », « left out, on purpose »).
• Les étiquettes mono sont en minuscules et concises (key-free, your key, target · sample, sha-256 3f9a…).

7. Liste de vérification finale

• Chaque affirmation, numéro, nom de fichier et hachage correspond aux propres fichiers et à la version actuelle du produit.
• Les jetons de couleur proviennent du produit (icône + thèmes clair/sombre) ; la sévérité n'est jamais exprimée uniquement par la couleur.
• L'histoire est synchronisée dans les deux sens, l'iris s'ouvre à partir du nœud et se referme sur lui, rien ne se chevauche à p = .27/.5/.75/.9.
• La disposition étroite et les images à mouvement réduit sont toutes deux correctes ; les paquets s'arrêtent hors écran.
• Les onglets, le paginateur, la recherche, les filtres et les boutons de copie fonctionnent avec le clavier ; le focus est visible.
• Le commutateur EN/TR réaffiche le plateau, le diagramme, le tableau, le terminal et les sourcils.
• Pas de défilement horizontal à 360/390px ; pas d'erreurs dans la console.
• Captures d'écran à 1440×900 et 390×844 : node scripts/screenshots.mjs example/index.html screenshots.