smryna-pergamum/aperture-topology-story

Aperture topology story

Uma página de produto que se comporta como um documento de engenharia silencioso com um movimento cinematográfico: o leitor rola para dentro de um nó da rede e a página escura se abre como uma abertura de câmera em um espaço de trabalho claro de papel onde o fluxo de trabalho real do produto é encenado com cartões. É adequado para ferramentas cujo valor é um pipeline que você pode mostrar (entradas → fontes/pares → resultados → saída): malhas de inferência, ferramentas OSINT e de pesquisa, pipelines de dados, CI, motores de sincronização, registros de pacotes. Não é adequado para marcas de estilo de vida ou moda.

A construção de referência é example/index.html: o site real para OSINT-Book (um caderno OSINT passivo e focado em fontes para Android e Windows), EN/TR, nas próprias cores do aplicativo. O código detalhado está em references/components.md; screenshots/ mostra cada seção, cada fase da história, turco, movimento reduzido e mobile.

Se o usuário nomear um site de referência, pegue apenas seu estilo. Nunca copie seus renders, nomes de produtos, textos, logotipo ou dados.

1. Antes de projetar

1. Leia as fontes do produto primeiro: README, guia do usuário, modelo de privacidade/ameaça, API ou registro de fontes, notas de lançamento, CHANGELOG. Cada afirmação na página mapeia para uma delas. Copie os números exatamente (versões, nomes de arquivos, tamanhos, SHA-256, portas). Se duas fontes discordarem (por exemplo, "22 módulos" vs. uma tabela de 20 linhas), mostre o que a tabela prova.
2. Pegue as cores do próprio produto: ícone do launcher, colors.xml do Android / lightColorScheme e darkColorScheme do Compose, propriedades customizadas CSS da web. Mapeie o esquema escuro do aplicativo para o fundo escuro e seu esquema claro para o espaço de trabalho da abertura — a página então literalmente alterna de um tema do aplicativo para o outro.
3. Encontre a história: escreva o fluxo de trabalho do produto como quatro verbos (OSINT-Book: alvo → descobertas → análise → relatório; uma malha de inferência: modelo → fatia → lugar → servir). Uma fase por verbo. Cada fase precisa de um título de ≤ 6 palavras.
4. Os dados de exemplo na história devem ser obviamente de exemplo: example.org, IPs de documentação (192.0.2.x, 203.0.113.x), um chip "dados de exemplo" em cada cartão. Nunca invente estatísticas, contagens de usuários, benchmarks ou depoimentos.
5. Use capturas de tela reais do aplicativo (WebP, ~800px de largura) para a seção de arquitetura.

2. DNA visual

Elemento	Regra
Fundo escuro	Quase preto, levemente tingido com a marca: --bg-2 (página) / --bg / --surface / --surface-2 / --surface-3. Uma grade de 36px de linhas de 1px a ~7% da tinta clara sobre todo o corpo. Piscinas de brilho radial (cor da marca a ~13%, segundo sinal a ~6%) atrás do herói e do palco.
Espaço de trabalho claro	O fundo claro do aplicativo (--paper) com uma grade de 34px a ~5,5% de tinta e um suave lavagem radial da cor do contêiner da marca no meio. Apenas dentro da abertura.
Tinta	Escuro: --fg / --fg-2 / --muted (muted ≥ 4,5:1 no fundo). Claro: --ink / --ink-2 / --ink-muted.
Marca	A cor do produto para o nó alvo, origem da abertura, chips "dados de exemplo", estados de Atenção, item ativo da trilha, bordas de hover. No escuro use o tom mais claro (--brand-2), no papel o tom mais profundo (--brand-ink).
Sinais	Mais dois matizes, cada um com um significado: teal = livre / ok / descoberta retornada; dourado = precisa de uma chave / opcional / ausente. Pacotes de saída usam a marca, pacotes de retorno teal. A severidade é sempre cor + ícone + palavra.
Título	Rajdhani 700, altura da linha .84–.98, espaçamento entre letras 0, caixa de frase. Herói 2.6–5.2rem com um brilho de quatro camadas: 0 0 2px #fff·86%, 0 0 18px brand-2·36%, 0 0 48px teal·14%, 0 18px 52px #000·60%. No papel a mesma face com 0 1px #fff, 0 14px 34px ink·12%.
Corpo / UI	Geist 400–700, 14–17px.
Rótulos	Geist Mono 10–13px: rótulos de nós, sub-rótulos, chips, quotas de tabela, terminal, trilha, sobrancelhas (01 / ai analysis, maiúsculo + .14em apenas aqui).
Cartões	Painéis escuros: raio 16px, 1px --line-2, gradiente de superfície vertical. Cartões de papel: branco, raio 14px, linha quente de 1px, sombra 0 14px 34px -14px. Chips são pílulas (20px de altura). Linhas de descoberta têm uma alça de gradiente 6×18px à esquerda.
Botões	Primário = preenchimento quase branco com tinta escura (raio 8px, 40px). Fantasma = linha de 1px que fica brand-2 no hover. Botões pílula na navegação carregam um sufixo mono (· web-v0.2.2).
Ícones	Ícones de linha única de 1,7px em grade 24 em um sprite <symbol> embutido; o mesmo sprite é <use> dentro do gráfico SVG.

3. Padrões de seção

1. Nav fixa (64px, escura translúcida + blur de 16px, linha inferior fina) – ícone + wordmark de dois tons, links pequenos, pílula do GitHub com versão, alternador EN/TR, botão primário.
2. Herói – topologia SVG de largura total (viewBox 1200×520; nó alvo no meio com halo + anel; 5–7 nós de origem em bordas tracejadas curvas, cada um com um rótulo mono e um sub-rótulo mono que indica o acesso: key-free, your key). O título fica sobre o quadrante inferior esquerdo do gráfico. Abaixo dele: uma frase de lead e uma linha de três colunas – "execute" (um chip de comando com copiar + botões de download primário/fantasma + link "siga …"), "o que é" (primeira frase em negrito
   • linha de fatos com pontos coloridos) e um pequeno selo da marca. Se o produto tiver um recurso principal que a topologia não mostra (OSINT-Book: análise de IA opcional), nomeie-o no lead e adicione uma pílula abaixo dele: uma tag de marca preenchida (AI analysis) + uma linha + seta, linkando para essa seção, que então vem primeiro após a história.
3. História da abertura (fixa, ~640vh) – veja §4.
4. Faixa de integração – rótulo mono maiúsculo à esquerda, uma lista quebrada de nomes pontilhados à direita, linhas finas acima e abaixo.
5. Alternador de arquitetura – cabeçalho da seção (grande título à esquerda, parágrafo à direita), depois um painel escuro: uma lista de abas (pílula preenchida = selecionada), uma coluna de texto (título, um parágrafo, lista ✓) e um diagrama de nós HTML sobre um SVG de conectores tracejados animados (marca = o que sai, teal = o que retorna, dourado = opcional), depois uma faixa horizontal de capturas de tela reais com legendas mono, depois um rodapé de legenda.
6. Blocos de módulo – blocos com duas pequenas "abas de quebra-cabeça" na borda superior: linha de entradas → uma linha lateral / centro / lateral (bloco central maior, matizado com a marca, fonte de título) → uma linha de 6 saídas; uma nota mono abaixo dele.
7. Tabela de catálogo – campo de pesquisa + selects mono-rotulados, uma tabela com nome + id mono, pílulas de tipo, uma coluna de acesso com pontos coloridos, uma coluna de quota mono, notas; rodapé com "Mostrando x–y de n · arquivo de origem" e um paginador. Uma lista <details> "deixado de fora, de propósito" abaixo dela.
8. Divisão de escopo – dois painéis escuros, "O que faz" (quadrado teal) / "O que nunca faz" (quadrado vermelho), cada item um lead-in em negrito mais uma frase, linha fina à esquerda.
9. Instalação – dois cartões de download (tile de ícone, nome, nome de arquivo mono · tamanho), depois uma janela de terminal (luzes de trânsito, abas mono, COPY que copia apenas os comandos, prompt colorido / comando / flags / comentários / saída) com um rodapé de status (ponto vivo brilhante), depois uma nota honesta dourada "Lançamentos iniciais".
10. Rodapé – texto sobre + pílulas de idioma, duas listas de link-cartão (linhas com setas; ↗ externo, → documentos), linha inferior com wordmark, chip de versão e linha de atribuição.

4. Interação principal: a história da abertura

Uma section.story (altura ≈ 640vh) contém um palco position:sticky; top:0; height:100svh com duas camadas:

• Camada escura – o mesmo gráfico de topologia novamente, uma dica mono (scroll · follow one target), e a linha de fechamento.
• Camada clara – clip-path: circle(R at X Y) onde X/Y é a posição na tela do nó alvo (medida com getBoundingClientRect). Dentro: quatro títulos empilhados (apenas um .on), uma placa lógica (1120×560 de largura, 360×640 estreita) dimensionada para caber, e uma trilha de fase mono.

Um único valor de progresso p = -rect.top / (story.offsetHeight - innerHeight) dirige tudo; cada elemento tem keyframes [p, {x, y, s, o}] interpolados com ease-in-out-cubic e aplicados como translate() scale() + opacity. Rolar para trás rebobina exatamente.

p	Fase	O que se move
.015 → .10	Abertura abre	R cresce de 0 até o canto mais distante; dica desaparece. Então clip-path:none.
.00 → .33	1 · entrada	O cartão de entrada sobe; suas linhas de checklist marcam uma a uma (p > .13 + i·.026); linhas bloqueadas por chave permanecem desmarcadas.
.31 → .56	2 · resultados	Cartão de entrada desaparece; o cartão "notebook" toma seu lugar; seis cartões de origem aparecem ao redor dele; um chip por origem voa de seu cartão para um slot no notebook (st = .37 + i·.024, pousa st + .04). O chip gap é tracejado.
.56 → .79	3 · interpretação	Cartões de origem encolhem em pontos; o notebook desliza para a esquerda (chips seguem sua transformação); três cartões de observação deslizam da direita; conectores tracejados desenham do chip citado para cada cartão; uma pílula "sem veredito" aparece.
.79 → .92	4 · saída	Tudo se dobra em um cartão de relatório; um cartão de commit surge abaixo dele e seus seis pontos de rota acendem.
.915 → .975	Abertura fecha	R encolhe para 0 de volta ao nó; a linha de fechamento brilhante aparece na camada escura.

• Apenas transform, opacity, clip-path e atributos SVG mudam durante a rolagem (um único manipulador throttled por rAF).
• Os pacotes do gráfico rodam em um loop rAF apenas enquanto um gráfico está na tela, nunca com movimento reduzido ou aba oculta.
• Telas estreitas (< 760px): um segundo layout de placa (origens como uma grade de pílulas 3×2 no topo, notebook dimensionado para .6 na fase 3, observações empilhadas, conectores ocultos). Mesma linha do tempo.
• Movimento reduzido (ou ?motion=reduce para revisão): sem fixação, sem abertura; a história renderiza como quatro quadros de papel estáticos (a placa em p = .30, .55, .78, 1) com seus títulos.
• A placa é aria-hidden; uma lista ordenada sr-only conta os mesmos quatro passos.

5. Regras de construção

• Um único index.html autônomo: doctype, charset, viewport, color-scheme: dark, theme-color; CSS e JS embutidos; Google Fonts (Rajdhani, Geist, Geist Mono) apenas; imagens ao lado da página como WebP; ícones como um sprite SVG embutido.
• Tokens em :root; toda cor da página vem deles (§2). Nomeie-os após papéis, mantenha os valores hexadecimais do produto.
• i18n: inglês vive no HTML (chaves data-i18n são lidas uma vez como a fonte em inglês); outros idiomas em um dicionário JS; strings construídas por JS usam T({en, tr}). Persista a escolha em localStorage dentro de try/catch. Traduza sobrancelhas também (maiúsculas + localidade turca transforma "install" em "İNSTALL").
• Acessibilidade: contraste AA em ambos os fundos, anel de foco visível (brand-2), link de pular, abas com role=tab, aria-selected, tabindex rotativo e teclas de seta, <table> real e <details>, botões de copiar com rótulos.
• Responsivo: layout completo ≥1060px; <1060px selo lateral do herói oculto, grade de IA empilhada, edições empilhadas; <760px uma coluna, viewBox do gráfico cortado (150 40 900 480) com rótulos maiores e sem sub-rótulos, placa de história estreita, nós de diagrama sem sub-linhas. Sem scroll horizontal em 360px; verifique se os filhos de grid têm min-width:0.
• Escape < e > em qualquer string de dados que você renderizar com innerHTML (http://<server-ip>).

6. Escrevendo o texto

• Títulos são duas linhas curtas que afirmam uma propriedade, não uma promessa: "Toda descoberta mantém sua fonte." "Duas edições. Um formato de arquivo." "IA que lê descobertas. Nunca as reescreve."
• Parágrafos: uma ou duas frases simples com os substantivos concretos (portas, formatos, algoritmos, nomes de arquivos).
• Limites recebem o mesmo peso que recursos ("O que nunca faz", "Lançamentos iniciais", "deixado de fora, de propósito").
• Rótulos mono são minúsculos e sucintos (key-free, your key, target · sample, sha-256 3f9a…).

7. Lista de verificação final

• Toda afirmação, número, nome de arquivo e hash corresponde aos próprios arquivos do produto e ao lançamento atual.
• Tokens de cor vêm do produto (ícone + esquemas claro/escuro); severidade nunca apenas por cor.
• História está em sincronia em ambos os sentidos, abertura abre a partir do nó e fecha nele, nada se sobrepõe em p = .27/.5/.75/.9.
• Layout estreito e quadros de movimento reduzido são legíveis; pacotes param fora da tela.
• Abas, paginador, pesquisa, filtros e botões de copiar funcionam com teclado; foco visível.
• Alternador EN/TR re-renderiza placa, diagrama, tabela, terminal e sobrancelhas.
• Sem scroll horizontal em 360/390px; sem erros no console.
• Capturas de tela em 1440×900 e 390×844: node scripts/screenshots.mjs example/index.html screenshots.