/guide Transparência técnica

Como este site
foi feito.

Este portal foi projetado, escrito, codado, publicado e revisado por um agente de IA (Claude, da Anthropic) operando de forma autônoma em uma VPS — do design à emissão do certificado TLS. Este guia documenta o processo pra quem quiser replicar.

01 · Stack
Vanilla, de propósito

HTML/CSS/JS estático, sem build tool. Libs vendoradas (sem CDN): GSAP + ScrollTrigger para motion, Lenis para smooth scroll e Three.js para o hero. O WebGL carrega via import() dinâmico só quando o dispositivo qualifica: desktop, sem prefers-reduced-motion, hardware com 4+ núcleos. Todo o resto degrada pra um fallback SVG animado — o site inteiro funciona sem JavaScript.

• Fontes DM Sans (variável) e DM Serif Display self-hosted em woff2, com preload
• Deploy = copiar arquivos pra um vhost nginx. Zero pipeline.
• Formulário envia pra um proxy nginx que injeta a credencial do CRM server-side — nenhum token no browser

02 · Direção de arte
A sala de controle da captação

O logo da Pulso é uma linha de ECG formando um "P" — então o ECG virou o sistema inteiro: o hero é um waveform cardíaco de 24 mil partículas varrendo a tela como um monitor real (shader GLSL com ondas P-QRS-T matemáticas), e uma linha de ECG vertical se desenha na lateral conforme o scroll avança, costurando as seções.

• Base midnight #0d1f33, energia teal #33cfd3 usada com disciplina
• DM Serif Display em escala editorial (até ~8rem), itálico nas palavras de ênfase
• Uma única seção clara (o Método) pra respiro — e ponte visual com as LPs de campanha
• Grain de ruído SVG por cima de tudo; números tabulares nas métricas

03 · Conteúdo
Copy de fontes reais

Nada de lorem ipsum: a copy veio do repositório de conhecimento da Pulso — posicionamento, glossário (agência → engenharia), método de 14 dias, módulos M1–M8, case âncora e FAQ. Regras de compliance CFM aplicadas na escrita: zero promessa clínica, zero antes/depois, zero preço de procedimento.

04 · Deploy & DNS
Da VPS pro ar

• Registro A criado via API da Hostinger (portal → VPS)
• Vhost nginx com cache imutável de 30 dias em /assets e no-cache no HTML
• TLS via certbot/Let's Encrypt, emitido minutos depois do DNS propagar
• Proxy POST /api/crm-lead → Frappe CRM com token injetado no servidor

05 · QA
Três passes de fine-tooth comb

Antes de aprovar, o agente roda três passadas completas de revisão usando Chrome headless controlado por CDP:

• Pass 1 — estrutura: screenshots full-page em 1440px e 390px, probe de overflow horizontal (scrollWidth === innerWidth + varredura de elementos vazando), console limpo, zero 404
• Pass 2 — motion: timing e easing das animações, counters, accordion, WebGL vs. fallback, emulação de prefers-reduced-motion
• Pass 3 — perf & a11y: LCP < 2,5s, CLS < 0,1, rota crítica < 300KB antes do Three.js lazy, contraste AA, estados de foco, alt text — e uma crítica escrita final: "isso parece AI slop?"

06 · Replique
O processo em uma frase

Dê a um agente acesso à marca (tokens + logos), ao conteúdo real (nada de placeholder), a uma VPS com nginx e a um protocolo de verificação com critérios objetivos — e exija três passes de crítica antes do "pronto". A diferença entre um site genérico e um site com opinião está no que você proíbe (stock photo sorridente, purple gradient, Inter) e no que você obriga (um motivo visual da marca levado às últimas consequências).

Ver o resultado →