evandro
c7d09d63d4
Hero e movimento - cena 3D em tempo real com os blocos da marca (kit feito no Blender, 3d/blocos.py): marca, tela, integrações e dados; segue a rolagem, tem vida em repouso, reage ao cursor e, parada no topo, passa sozinha pelos estados com legenda - três níveis de aparelho (full, lite, static); sem WebGL fica o pôster - título novo: "Sites e sistemas sob medida para o jeito que a sua empresa trabalha." - faixa de clientes com o ramo, linha do primeiro passo, hero alinhado às seções - rótulos digitados, entrada dos blocos, cortina de blocos entre páginas e capa compartilhada entre a lista de cases e o case Ofertas - atendimento no WhatsApp com IA e nota fiscal para a reforma tributária (páginas de serviço, cartões da home, formulário e aviso com data de validade) - página /ia atualizada, com fontes - peças 3D em loop nos cartões e topos de página (3d/pecas.py) Design - hover por papel (bloco nos botões, barra nos links), rótulos sem caixa alta - um destino por rótulo: "Falar sobre meu projeto" leva ao formulário, "Chamar no WhatsApp" abre o WhatsApp - logo montado em blocos, 404 redesenhado, grades sem célula vazia - ícones do PWA e manifesto novos Specs em specs/, contexto de design em DESIGN.md e PRODUCT.md.
84 lines
4.1 KiB
Markdown
84 lines
4.1 KiB
Markdown
# DESIGN.md
|
|
|
|
Registro das decisões de desenho do evandro.dev.br. O código (`app/globals.css`, componentes) é a fonte dos valores; este arquivo diz o porquê.
|
|
|
|
## Conceito
|
|
|
|
```
|
|
Ideia: os blocos da marca são as peças com que se monta o site ou o sistema de cada cliente
|
|
Metáfora: kit de blocos de encaixe, como uma maquete
|
|
Assinatura: no hero, os blocos da marca se soltam e se remontam com a rolagem em tela, integrações e dados
|
|
Emoção: nos três primeiros segundos, "isto foi montado peça por peça"
|
|
Verbo: encaixar: chega rápido, assenta curto, sem quique
|
|
Quadro: a marca em porcelana com os quatro cubos verdes ao lado do título
|
|
```
|
|
|
|
Âncora: o símbolo é feito de blocos (`public/brand/mark-dark.svg`); o conceito não serve para outra marca.
|
|
|
|
## Paleta
|
|
|
|
| Papel | Token | Valor |
|
|
|---|---|---|
|
|
| Fundo escuro, tinta | `--ink` | `#0a0a0a` |
|
|
| Fundo claro | `--paper` | `#f4f2ed` |
|
|
| Fundo claro, segundo plano | `--paper-dark` | `#eceae4` |
|
|
| Acento | `--slash` | `#ccff00` |
|
|
| Texto secundário | `--meta` | `#4a4a4a` |
|
|
| Controles que abrem o WhatsApp | `--whatsapp` | `#25d366` |
|
|
|
|
O acento aparece em pouca área: um trecho do título, um botão, os cubos da marca. Verde sobre preto é a identidade da marca desde 2026-09, não uma escolha de tendência.
|
|
|
|
## Tipografia
|
|
|
|
- Display e corpo: Space Grotesk (`--font-display`).
|
|
- Rótulos, números e código: Geist Mono (`--font-mono`), 13 px, sem caixa alta, `letter-spacing` de 0,02em.
|
|
|
|
## Forma
|
|
|
|
Cantos retos por padrão (blocos, molduras, botões do hero). Raio aparece em poucos lugares: formulário de contato, botão do WhatsApp e indicadores circulares.
|
|
|
|
## Movimento
|
|
|
|
Só CSS e Three.js direto. Sem biblioteca de animação (GSAP, Motion e React Three Fiber saíram em 2026-10-14 por desempenho).
|
|
|
|
| Uso | Duração | Curva |
|
|
|---|---|---|
|
|
| Entrada de componente | 280 ms | `--ease-out` |
|
|
| Saída de componente | 180 ms | `--ease-in` |
|
|
| Entrada do título e do hero | 850 a 1100 ms | `--ease-out` |
|
|
| Troca de página | 600 ms; a capa compartilhada viaja em 500 ms | cortina em degraus de 8 colunas; `--ease-out` na capa |
|
|
| Detalhes de bloco (cursor, cortina) | conforme o caso | `steps()` |
|
|
|
|
Regras:
|
|
- Animam só `transform` (e `translate`, `scale`), `opacity`, `clip-path` e `mask`. Única exceção: a altura das perguntas frequentes ao abrir e fechar.
|
|
- O texto está no HTML desde o primeiro quadro; a animação nunca esconde conteúdo de quem não a recebe.
|
|
- Coisa grande se move devagar, detalhe se move rápido; escalonamento entre 20 e 80 ms.
|
|
- Com `prefers-reduced-motion: reduce` não há cena, rolagem suave nem animação; o conteúdo aparece inteiro.
|
|
|
|
## Resposta ao ponteiro e ao foco
|
|
|
|
Um tratamento por papel, sempre entrando pela esquerda em 280 ms com `--ease-out`; com movimento reduzido a troca é instantânea.
|
|
|
|
| Papel | Tratamento |
|
|
|---|---|
|
|
| Botão verde | um bloco cor de papel cobre o botão e o texto continua escuro; sobre fundo claro o bloco é escuro e o texto inverte |
|
|
| Botão de contorno | o mesmo bloco: translúcido no fundo escuro, escuro no fundo claro (o texto inverte) |
|
|
| Link de texto e item do menu | uma barra de 2 px cresce sob o texto |
|
|
| Item da vitrine | uma barra verde entra pela esquerda |
|
|
| Tocar vídeo | o círculo cresce e fica verde |
|
|
| Logo | os quatro quadrados verdes sobem em sequência e assentam |
|
|
|
|
"Falar sobre meu projeto" sempre leva ao formulário. Controle que abre o WhatsApp se chama "Chamar no WhatsApp".
|
|
|
|
## Cena 3D
|
|
|
|
Fonte em `3d/blocos.py` (Blender), saída em `public/3d/`. Um bloco chanfrado, repetido, com quatro estados: `marca`, `tela`, `integracoes`, `dados`.
|
|
|
|
| Nível (`sceneTier()` em `lib/device.ts`) | Quem recebe | O que recebe |
|
|
|---|---|---|
|
|
| `full` | computador com GPU, mais de 4 núcleos e mais de 4 GB | cena em tempo real guiada pela rolagem |
|
|
| `lite` | celular com 6 núcleos ou mais e 4 GB ou mais | cena em tempo real leve, que troca de estado sozinha |
|
|
| `static` | o resto, movimento reduzido, economia de dados, ou quem não segura 28 ms por quadro | pôster renderizado no Blender |
|
|
|
|
O pôster é o primeiro quadro de todos os níveis e o LCP continua sendo o título.
|