portifolio-evandrodevbr/specs/2026-11-10-melhorias-de-design.md

Melhorias de design depois da avaliação

Autor: Evandro · Data: 2026-11-10 · Porte: grande · Status: concluída

1. Objetivo

Aplicar as melhorias que a crítica do Impeccable (29/40, Consistência 2) e o crítico cego do jury (6,4) apontaram, para o conceito de blocos valer no site inteiro e os botões responderem como o resto. Aprovado pelo usuário em 2026-11-10 ("incluir as melhorias propostas").

Leitura (frontend-orchestrator): refino · Persuade · web · 3d, premium → impeccable, design-rules, threejs-shaders e threejs-animation na cena; fecha com audit, diagnóstico rápido e jury.

2. Escopo

• Dentro: hover dos alvos principais; blocos nos topos das páginas internas; um destino só para "Falar sobre meu projeto"; botão do WhatsApp e aviso de cookies no celular; rótulo único para a página /ia; grades com sobra; menos rótulos em caixa alta; cena com vida em repouso e reação ao cursor; logo em blocos no cabeçalho; rel="noopener" nos links externos.
• Fora (não fazer): números de resultado nos cases (dependem de dados do usuário, P1); mudar ofertas ou textos de venda; biblioteca de animação; novo conceito visual.

3. Critérios de aceite

• CA1 (hover): todo botão verde, botão de contorno, link de texto, item da vitrine e botão de tocar vídeo muda de forma visível sob o ponteiro e no foco, com um tratamento por papel; com movimento reduzido a troca é instantânea → noHoverChange 0 e nenhum alvo primário em colorOnly no shoot.mjs do jury.
• CA2 (blocos nas páginas internas): /cases, /curriculo, /privacidade e as duas páginas de serviço sem capa mostram uma peça de blocos à direita do topo de 1024 px em diante, decorativa, sem estouro → inspeção em 1440×900 e pnpm test:e2e -- routes.
• CA3 (um destino): todo controle chamado "Falar sobre meu projeto" leva ao formulário; todo controle que abre o WhatsApp se chama "Chamar no WhatsApp" → grep dos rótulos e pnpm test:e2e -- contact keyboard.
• CA4 (celular): com o aviso de cookies aberto o botão flutuante não aparece; o aviso tem até 72 px de altura em 390 px; o link da política tem alvo de 24 px ou mais → pnpm test -- GoogleAnalytics FloatingWhatsApp e inspeção em 390×844.
• CA5 (rótulo): menu, trilha, rodapé e rótulo da página /ia dizem "Revisão de app com IA" → pnpm test -- Header Footer app/ia.
• CA6 (grades): nenhuma grade de cartões termina com célula vazia em 1440 px em /cases e /servicos; os cartões de /ia e do currículo não esticam com buraco interno → inspeção.
• CA7 (rótulos): .ds-eyebrow sem caixa alta; o rótulo do hero cabe em até 2 linhas em 390 px; as páginas internas com trilha não repetem rótulo sobre o título → inspeção e pnpm test.
• CA8 (cena viva): em repouso cada estado tem um movimento próprio e, no nível full, os blocos reagem ao cursor; o desenho continua sob demanda e para sem atividade → pnpm test -- BlocosScene lib/blocos e captura com GPU.
• CA9 (logo): o símbolo do cabeçalho responde ao ponteiro e ao foco com os quadrados verdes encaixando; em repouso o logo é igual ao atual (diferença média de pixel abaixo de 2 em 255) → medição do agente e inspeção.
• CA10: pnpm lint && pnpm typecheck && pnpm test && pnpm build && pnpm test:e2e verdes; novo jury com crítico novo, nota por categoria igual ou maior que a anterior.

4. Contexto verificado

• app/components/button-styles.ts: primaryButton só clareia no hover (hover:bg-[#d9ff40]); contornos só mudam a borda; links de texto só mudam a cor.
• app/components/Hero.tsx:110-116: o botão verde do hero abre o WhatsApp; Header.tsx:86-91: o do cabeçalho leva ao formulário.
• lib/site-navigation.ts:10: item { href: "/ia", label: "IA" }.
• app/globals.css (.ds-eyebrow, .ds-kicker): 12 px, text-transform: uppercase, letter-spacing: 0.08em; Section.tsx:47-58 põe um sobre cada título.
• app/components/FloatingWhatsApp.tsx:61-66 e GoogleAnalytics.tsx:224-236: botão flutuante e aviso de cookies, ambos fixos na base no celular.
• app/components/cinematic/BlocosScene.tsx e lib/blocos.ts: cena de blocos, parada em repouso fora do balanço da marca.
• app/components/Logo.tsx: o logo é um .webp único (/brand/wordmark-<tema>.webp), sem partes animáveis; o símbolo existe em SVG (public/brand/mark-dark.svg, mark-light.svg).
• 3d/blocos.py e 3d/pecas.py: geram o pôster da marca e três loops; os estados tela, integracoes e dados só têm prévia em 3d/out/.

5. Desenho

• Hover, um tratamento por papel, no verbo "encaixar" (entra pela esquerda, 280 ms, --ease-out, só transform e opacity):
  • botão verde: um bloco cor de papel cobre o botão da esquerda para a direita; o texto continua escuro;
  • botão de contorno: o mesmo bloco, translúcido no fundo escuro e escuro no fundo claro (o texto inverte);
  • link de texto e item do menu: uma barra de 2 px cresce da esquerda sob o texto; o sublinhado fixo dos links de texto continua;
  • item da vitrine: barra verde entra pela esquerda; tocar vídeo: o círculo cresce e fica verde.
• Um destino: "Falar sobre meu projeto" vai ao formulário em todo lugar. No hero entra um link discreto "Chamar no WhatsApp". Nas páginas de serviço, o botão que abre o WhatsApp com o assunto do serviço passa a se chamar "Chamar no WhatsApp".
• Peças das páginas internas: /cases usa o estado tela, /curriculo o integracoes, /privacidade o dados; atendimento usa o loop peca-whatsapp e nota fiscal um loop novo, peca-fiscal. Só de 1024 px em diante.
• Rótulos: sem caixa alta, 13 px, letter-spacing 0,02em; o efeito digitado continua. No celular o rótulo do hero mostra só "Engenharia de software".
• Cena: marca com os quatro quadrados verdes pulando em sequência; tela com o botão verde pulsando; integracoes com um pulso verde correndo do centro para os nós; dados com as barras respirando. Cursor: os blocos perto dele avançam para a frente.
• Logo: símbolo em SVG ao lado do texto recortado do .webp atual; se a montagem não bater com o original dentro da tolerância, fica o .webp com um tratamento de hover no logo inteiro.
• Descartado: esconder o botão flutuante do WhatsApp de vez no celular (é o atalho de contato mais usado).

Arquivos por frente (um dono cada): botões e celular em button-styles.ts, globals.css, Hero.tsx, Header.tsx, FloatingWhatsApp.tsx, GoogleAnalytics.tsx, vitrine e CasePlayer.tsx; páginas internas em app/cases, app/servicos, app/curriculo, app/privacidade, app/ia, lib/site-navigation.ts, lib/site-content.ts, Footer.tsx; Blender em 3d/ e public/3d/; cena em BlocosScene.tsx e lib/blocos.ts; logo em Logo.tsx e public/brand/.

6. Restrições, riscos, suposições

• Restrições: as mesmas das specs anteriores (Next 16, sem servidor extra além do next dev já aberto, sem commit).
• Riscos: o logo é a peça mais sensível da marca (por isso a tolerância e o plano B); mudar o destino do botão do hero mexe em medição de cliques e em testes de ponta a ponta.
• S1: as recomendações dos itens 3 e 5 da proposta estão aceitas como escritas.
• P1 (fora desta spec): números reais de resultado por cliente, para a página de cada case.

7. Microtasks

T1 · Dar hover, destino único e celular limpo aos botões · N3

• Serve: CA1, CA3, CA4, CA7 · Depende de: nenhuma · Arquivos: os da frente "botões e celular"
• Pronto quando: os cinco papéis têm o tratamento da seção 5; o hero leva ao formulário e tem "Chamar no WhatsApp"; aviso de cookies e botão flutuante cumprem o CA4; rótulos sem caixa alta.
• Verificar: pnpm test -- Hero Header FloatingWhatsApp GoogleAnalytics Section e e2e/contact.spec.ts, e2e/keyboard.spec.ts contra a porta 3000.
• feito

T2 · Levar blocos, grades e rótulo único às páginas internas · N3 [P]

• Serve: CA2, CA3, CA5, CA6, CA7 · Depende de: nomes de arquivo do T3 · Arquivos: os da frente "páginas internas"
• Verificar: pnpm test -- cases servicos curriculo privacidade app/ia Footer site-content.
• feito

T3 · Renderizar os três estados e a peça da nota fiscal · N3 [P]

• Serve: CA2 · Arquivos: 3d/blocos.py, 3d/pecas.py, public/3d/estado-*.webp, public/3d/peca-fiscal.*
• Verificar: blender -b --python 3d/blocos.py → OK; blender -b --python 3d/pecas.py → OK pecas=4.
• feito

T4 · Dar vida à cena em repouso e reação ao cursor · N3 [P]

• Serve: CA8 · Arquivos: BlocosScene.tsx, lib/blocos.ts e testes
• Verificar: pnpm test -- BlocosScene lib/blocos; captura com GPU dos quatro estados em dois instantes.
• feito

T5 · Montar o logo do cabeçalho com o símbolo em blocos · N3 [P]

• Serve: CA9 · Arquivos: Logo.tsx, teste, arquivos novos em public/brand/
• Verificar: pnpm test -- Logo Header Footer; diferença média de pixel contra o logo atual abaixo de 2 em 255 em 180 e 240 px.
• feito

CP1 · após T1–T5 · N0

• Verificar: CA10 (suíte, build, e2e sobre pnpm start -p 3001, jury com crítico novo) e inspeção com GPU em 1440×900 e 390×844.

8. Registro

2026-11-10 — spec escrita a partir das nove melhorias propostas; o item 8 (resultado nos cases) ficou fora por depender de dados do usuário. 2026-11-10 — T3: estado-tela.webp (77 KB), estado-integracoes.webp (49 KB) e estado-dados.webp (70 KB), 1200×900 com alfa; peca-fiscal (webm 46 KB, mp4 54 KB, pôster 8 KB): nota de 11×16 blocos com as linhas como vãos e um selo verde de 7×7 com o "V" vazado. O pôster da marca não mudou de enquadramento. blocos.json com o mesmo md5. 2026-11-10 — T2: PagePiece.tsx novo, só de 1024 px em diante. /cases com o quinto cartão na linha toda; /servicos em 3 + 2; /ia e currículo com cartões alinhados pelo topo. Rótulo único IA_PAGE_LABEL ("Revisão de app com IA") no menu, na trilha, no rodapé e nos dados estruturados. Nenhuma página interna tinha "Falar sobre meu projeto" indo ao formulário além do currículo: os botões que abrem o WhatsApp viraram "Chamar no WhatsApp". No topo do case ficou só "Case de cliente" ou "Projeto de laboratório". 2026-11-10 — T5: logo montado de SVG (símbolo) mais wordmark-text-<tema>.webp (o original com o símbolo apagado, em 1600×330). Diferença média contra o logo anterior: 0,82 e 0,89 (escuro, 180 e 240 px), 0,34 e 0,39 (claro); caixa do link igual. As medidas do símbolo vieram do .webp, porque as do mark-*.svg não batem com ele. 2026-11-10 — T1: classes cv-fill, cv-outline-dark, cv-outline-light (bloco que entra pela esquerda) e cv-bar (barra de 2 px) em globals.css, só sob @media (hover: hover) e no foco. O botão do hero leva a /#contact-form; entrou o link "Chamar no WhatsApp", que é o que o botão flutuante observa. Fora da home, o botão do cabeçalho continua abrindo o WhatsApp, agora com o nome "Chamar no WhatsApp". Aviso de cookies com 67,7 px em 390 px e texto de 13 px abaixo de 640 px; o botão flutuante some com o aviso aberto. O espaço no fim da página já existia no rodapé. O limite de Tabs do caminho linear foi de 40 para 41 (o link novo do hero). 2026-11-10 — o contato sem JavaScript (Contact.tsx, <noscript>) também passou a dizer "Chamar no WhatsApp". 2026-11-10 — T4: papeis() em lib/blocos.ts tira do blocos.json os quatro quadrados da marca, o botão da tela, as seis linhas das integrações e as cinco barras dos dados. A vida em repouso e o cursor ficam no vertex shader; o peso vai a zero na troca de estado e na entrada; o relógio só anda quando há quadro. As barras respiram 15% (os 6% da proposta quase não se viam). O cursor empurra os blocos no eixo da própria peça, não na linha da câmera. Tempo de quadro medido com GPU: até 0,39 ms, um quadro a cada 33 ms. 2026-11-10 — segunda passada do Impeccable (~/tmp/avaliacao/impeccable-2.md): crítica 30/40, com Consistência de 2 para 3 e nenhuma heurística abaixo de 3; auditoria 15/20, sem mudança. O LCP com GPU ficou no título, em 356 ms. 2026-11-10 — problemas que as mudanças criaram, apontados na segunda passada e corrigidos: (1) o bloco cor de papel sumia nos botões verdes sobre cartão branco: em seção clara o bloco é escuro e o texto inverte; (2) sem caixa alta, o rótulo da vitrine mostrava "loja virtual · Em Produção": projectKicker() em lib/project-showcase.ts escreve "Loja virtual · em produção"; (3) rodapé, "Em movimento" e "Role para mergulhar" ainda estavam em caixa alta; (4) a imagem de reserva do 404 era pré-carregada em todas as páginas: ganhou loading="lazy". 2026-11-10 — também da segunda passada: token --whatsapp (e --whatsapp-hover) no lugar das 9 cores soltas, e o botão de envio do formulário com o mesmo bloco dos outros. 2026-11-10 — o next dev parou de servir o CSS novo depois dos builds de produção feitos ao lado dele; foi reiniciado (pid novo) e voltou a servir. 2026-11-10 — ficam abertos, por serem decisão de produto ou anteriores a este trabalho: o botão do cabeçalho muda de nome e de destino entre a home e as outras páginas; o hero começa em x=68 e o resto em x=100; rótulos que repetem o título em três seções; o botão flutuante ainda cobre fim de linha no meio da rolagem; "Quatro pontos de partida" na home e "Cinco jeitos de começar" em /servicos. 2026-11-10 — suíte e2e sobre o build com as correções: 60 de 60. 2026-11-10 — pedido do usuário durante a execução: nos cartões da home, os dois balões soltos não se leem como conversa de WhatsApp, e a mídia da revisão (o trecho do relatório pequeno numa caixa escura) não sugere revisão. Mudanças: peca-whatsapp vira um celular de blocos com a conversa dentro, com um selo "WhatsApp" em HTML por cima; a revisão ganha a peça peca-revisao (uma lupa atravessa uma janela e assenta os blocos fora do lugar), com o trecho do relatório maior ao lado. O cartão da revisão deixa de ser exceção: três dos quatro cartões usam peça em loop. 2026-11-10 — peças entregues: peca-whatsapp refeita (celular de 9x16 blocos, três balões alternando os lados, pontos de "digitando") e peca-revisao nova (janela de 13 blocos de largura, lupa lima, três blocos que assentam, selo de conferido); pecas.py termina em OK pecas=5. No cartão: selo "WhatsApp" em HTML no canto de cima à esquerda; trecho do relatório ao lado da janela a partir de 29rem de quadro, embaixo do vídeo no celular e oculto entre 1024 e 1279 px (cartões lado a lado com quadro estreito). O vídeo dos cartões passou de object-cover a object-contain, porque no quadro 21:9 o celular e a janela eram cortados; o fundo do vídeo é o mesmo do quadro. 2026-11-10 — medido em dez larguras de 360 a 1920 px: o trecho nunca cobre a janela (folga mínima de 17 px, em 1280), o selo nunca cobre o celular (folga mínima de 7 px, em 360), os títulos dos cartões 3 e 4 ficam alinhados em duas colunas, sem rolagem horizontal. 2026-11-10 — verificação depois dessas mudanças: Biome sem erro, typecheck sem erro, 153 suítes e 1654 testes, build sem erro. 2026-11-10 — CP1: Biome, typecheck, 153 suítes e 1654 testes, build; e2e 60 de 60 sobre pnpm start -p 3001 (servidor encerrado depois). Jury, rodada 2, com crítico novo (~/tmp/.jury/127.0.0.1-3001/scorecard.md): geral 7,0 contra 6,4; Design 6 → 7, Usabilidade 7 → 7, Criatividade 6 → 7, Conteúdo 7 → 7; nenhuma categoria caiu (CA10). Audit: 4 FAIL e 17 WARN contra 4 e 32; os 4 FAIL são os mesmos (texto de h2 que a ferramenta conta duas vezes e um link só de mouse sem nome). 2026-11-10 — depois da captura do jury: os botões do aviso de cookies ganharam o bloco no hover (eram só troca de cor em todas as páginas) e o link de e-mail de /privacidade ganhou alvo de 24 px. Conferido com os testes unitários e com keyboard, contact e navigation do e2e contra o next dev (28 de 28); não houve novo build de produção nem novo jury depois disso. 2026-11-10 — ficam abertos, da lista do crítico: o espaço depois de f e t no texto do celular (visto só na captura headless, não reproduzido em aparelho), o triângulo padrão dos <details> nas páginas de case e de serviço, espaço morto em cartões de /servicos, as requisições abortadas do vídeo da vitrine, e os dois itens que dependem do dono: resultado medido nos cases e a conta dos "5 anos de experiência" contra o currículo que começa em junho de 2022.