uma home que se mexe sem pesar
O cobogó cai como chuva seguindo a geometria exata do símbolo, o anel de vidro gira, o manifesto troca de etapa com a rolagem e os cases correm de lado. Tudo em CSS e transformações leves, sem biblioteca de animação.
← /cases/pacoba-online
pacoba.online
O site que você está vendo. Um portfólio que virou o site de um estúdio AI-first, feito com o mesmo motor criativo que a Pacoba usa nos projetos, e medido como produto.
- cliente
- Pacoba
- ano
- 2026
- área
- Produtos & sistemas
- papel
- Marca, direção criativa, design e desenvolvimento
- 1,4 sPara a home aparecer no celular, ao vivo
- 0Falhas WCAG 2.2 AA em 9 páginas, nos dois temas
- 7Agentes no motor criativo, cada um com um papel
- 25Páginas de DNA de marca antes do layout
01 — contexto
de onde partiu.
O pacoba.online nasceu como portfólio pessoal, com um painel próprio para publicar projetos. Em 2026 a Pacoba virou estúdio AI-first, e o site precisava virar a vitrine dessa mudança.
02 — o problema
o que travava.
Um estúdio que vende AI não pode ter site com cara de AI genérica: gradiente roxo qualquer, foto lisa demais, animação pesada. O site precisava ser bonito, vivo e rápido, e provar o método em vez de só descrever.
E tinha de ser simples de manter: publicar case, trocar texto e ler os contatos sem abrir código.
03 — processo
as decisões.
- 01
marca antes de layout
O DNA da Pacoba veio primeiro: símbolo binário (o círculo é 0, a haste é 1), Fogo como cor protagonista, fotografia de pessoa nítida com o mundo em movimento, voz em caixa baixa. 25 páginas, aprovadas antes de qualquer tela.
- 02
o motor criativo mora no código
Diretor criativo, curador, engenheiro, redator, produtor de mídia, estrategista e guardião de qualidade são agentes que vivem no próprio repositório, com pontos de aprovação humana. O site é o primeiro cliente do motor.
- 03
ver antes de construir
KVs com referências, protótipo do site renderizado e plano com orçamento de performance antes do código. Ajuste custa pouco nessa fase.
- 04
feedback vira checklist
Cada rodada de revisão vira uma lista registrada no repositório. Nada conta como feito sem conferência em tela, nos dois temas, no desktop e no celular.
04 — o que foi construído
por dentro.
imagem com direção, não banco de imagem
As fotos são geradas a partir da direção do DNA, com referência de estilo e curadoria humana. Cada etapa do manifesto tem uma imagem que diz o mesmo que o texto.
vidro fosco e dois temas
Escuro e claro equivalentes, inclusive na primeira dobra. O vidro é denso de propósito: o fundo vivo aparece, mas nunca atrapalha a leitura.
cases como produto
Um template único para todo case: contexto, problema, decisões, o que foi construído, stack e aprendizados. Texto rico no código, ordem e publicação no painel.
gestão do site
Painel próprio, fora do menu e dos buscadores, para publicar projetos, editar a home e ler os contatos. O formulário avisa por e-mail com a marca da Pacoba.
05 — galeria
06 — stack
com o quê.
- interface
- Next.js 16React 19TypeScriptTailwind CSS 4Animação por rolagem em CSS
- dados e operação
- SupabaseVercelE-mail transacionalFontes no próprio repositório
- motor criativo
- Claude Code7 agentes com papelComandos de marca, imagem e motion
- imagem e qualidade
- Magnific (Seedream, Nano Banana)PlaywrightAuditoria axe WCAG 2.2Medição de LCP e CLS
07 — aprendizados
o que fica.
confira o CSS que vai para o ar
O vidro fosco não desfocava: o minificador descartava a propriedade padrão e o navegador ignorava a versão com prefixo. No código estava certo. Só a conferência no arquivo final mostrou.
build não depende de rede
O deploy caiu uma vez porque a fonte não baixou do Google na hora da compilação. As fontes passaram a morar no repositório, com a licença ao lado.
o site é a prova
Velocidade, acessibilidade e o processo à mostra viraram critério de aceite, não acabamento. Para um estúdio AI-first, o próprio site é o case mais honesto.