Seu site é shape-ready? Transformei meu portfólio num vídeo sem editor de vídeo

Ferramentas como o "Is your site agent-ready?" da Cloudflare perguntam se um agente de IA consegue ler o seu site. É uma boa pergunta, e o meu portfólio foi feito para passar nela: tem versões em markdown, llms.txt, dados estruturados e um servidor MCP que agentes consultam direto.

Mas, trabalhando nele, apareceu uma pergunta seguinte: o site está pronto para virar outra coisa? Um vídeo, um componente, uma apresentação, o que um agente decidir criar a partir dele. Chamei isso de shape-ready: um site moldável, que serve de matéria-prima e não só de vitrine.

Para testar a ideia, pedi a um agente que transformasse o próprio portfólio num vídeo de lançamento. Este é o resultado:

O vídeo de apresentação, feito a partir do site real. Tem som: a trilha também foi gerada em código.

Como o vídeo foi feito

Nenhum editor de vídeo foi aberto. Tudo saiu de código escrito em conversa com o Claude, no Claude Code.

1. Música primeiro. O roteiro foi escrito em cima de uma grade de 100 batidas por minuto e 36 compassos. Cada corte, zoom, texto e efeito sonoro cai num tempo dessa grade. Um único arquivo de "partitura" guarda tudo, e tanto a música quanto o vídeo leem esse mesmo arquivo.

2. O site real, quadro a quadro. Gravar a tela em tempo real trava e perde quadros. Em vez disso, o agente injetou no navegador um relógio virtual: performance.now, Date, os timers, o requestAnimationFrame e as animações CSS passam a obedecer a um tempo que só avança quando o script manda. A cada 1/60 de segundo, uma foto. As animações que aparecem no vídeo são as do próprio site, nada foi refeito.

Um dos closes do hero: o mesmo desenho isométrico do site, ampliado.

3. Um compositor em código. Uma página monta cada quadro a partir das fotos: os mockups de notebook e celular, a câmera 3D com zoom e inclinação, o desfoque de foco, as telas divididas, os textos e o cursor. Para uma etapa do site cair numa batida, o compositor acelera ou desacelera aquele trecho. A câmera lenta usa um trecho capturado a 300 quadros por segundo.

A montagem em tela dividida: quatro interações do site, cada uma entrando numa batida.

4. Trilha e efeitos sonoros originais. A música foi sintetizada nota a nota: bateria com swing, baixo, piano elétrico, guitarra, assobio e metais, além de uns 20 efeitos sonoros, como o teclado, o papel das persianas e o livro saindo da estante. Como a IA não ouve, a estrutura foi conferida pelo espectrograma, e a parte de ouvir ficou comigo.

5. Um agente de verdade no clímax. A cena final mostra um agente perguntando ao site "quais serviços o Yan oferece e como ele trabalha?". A resposta usa os dados reais do servidor MCP do portfólio: os serviços, os prazos e a forma de trabalho.

Como a pessoa vê e como o agente lê: o mesmo site, dos dois lados.

O que tornou o meu site shape-ready

Nada disso funcionaria num site qualquer. Olhando para trás, estes foram os pontos que permitiram transformar o portfólio em vídeo, e eles servem como checklist para qualquer site:

1. Desenhos em código, não em imagem. As ilustrações são SVG. Dá para ampliar sem perder qualidade, animar e recombinar.
2. Animações que dependem do tempo. Tudo roda sobre requestAnimationFrame e animações CSS, que um relógio virtual consegue controlar. Animação presa a vídeo pronto ou a eventos imprevisíveis não é moldável.
3. Estados controláveis. Tema, idioma, aviso de cookies e preloader podem ser definidos antes de a página carregar, sem clicar em nada.
4. Identidade explícita. Cores e fontes estão definidas como tokens, então o agente reproduz a marca fora do site.
5. Conteúdo estruturado. Textos em markdown e dados organizados viram roteiro, legenda ou resposta sem retrabalho.
6. Uma porta para agentes. O servidor MCP entrega dados reais, então o agente não precisa adivinhar nem inventar.
7. Build reproduzível. O site roda localmente em modo de produção, igual ao publicado.

Se o seu site cumpre esses pontos, ele já não é só uma vitrine: é matéria-prima.

O que deu errado

• Tela branca em câmera lenta. As persianas do preloader são brancas sobre um site branco. Em câmera lenta de 4×, viraram quase dois segundos de nada. Ficou em 2×.
• O site rolou sozinho. Clicar num tema da prateleira do blog leva a página até a lista, e a câmera continuava mirando a prateleira. A solução foi abrir a câmera no instante do clique, com um desfoque de movimento.
• Um seletor derrubou o lote. O script não encontrou o globo e parou as capturas seguintes. Desde então, cada tomada é testada sozinha primeiro.

A prateleira do blog em close: cada tema é um vão, cada post é um livro.

Faça no seu site

Deixei o prompt completo, com o passo a passo e as armadilhas, em prompt do vídeo do site. É só preencher os campos com as informações do seu site e colar num agente de código.

Se preferir que eu faça o vídeo do seu site, ou que eu deixe o seu site shape-ready, me chame pela página de contato.

Referências

• MDN: Document.getAnimations() — como listar e controlar as animações de uma página.
• MDN: requestAnimationFrame — a base das animações que o relógio virtual controla.
• Playwright: capturas de tela — a ferramenta que capturou cada quadro.
• Model Context Protocol — o protocolo do servidor que o agente consultou.
• Documentação do FFmpeg — montagem do vídeo e do áudio.