Animação de site com IA · aberto e gratuito
Animações de site que saem prontas de um prompt
Um molde de prompt, cinco peças interativas no estilo INEMA e um vídeo curto de cada uma. Copie, adapte e use.
Um molde de prompt, cinco peças interativas no estilo INEMA e um vídeo curto de cada uma. Copie, adapte e use.
O INEMA Motion Lab ensina a pedir animações de site para uma IA (Claude, Codex ou outra) e receber algo com acabamento profissional, não um efeito genérico. Ele traz um molde de prompt em três partes (aparência, movimento e regras) e cinco exemplos reais feitos com ele: uma busca ⌘K, uma grade de recursos, uma página 404 jogável, um rodapé com letras que caem e um botão de tema dia/noite. Cada peça é um único arquivo HTML que você abre no navegador e cola no seu site, e vem com o prompt que a gerou e um vídeo curto. Serve para quem faz páginas, guias ou cursos e quer movimento sem depender de biblioteca pesada.
O molde é o que mais vale: é ele que faz a próxima animação sair boa. As peças e os vídeos são a prova de que funciona.
Aparência com valores exatos, movimento em passos numerados com tempo em milissegundos e regras técnicas que evitam os erros mais comuns.
Um arquivo HTML cada, sem build, nas cores e fontes do INEMA. Funcionam no celular, no teclado e com movimento reduzido.
Cada peça tem um modo demonstração com cursor fantasma, gravado em WebM e MP4, pronto para usar como imagem de apoio em vídeos e posts.
Todas as cinco peças passaram por este mesmo caminho. O teste e a gravação são scripts deste repositório.
O vídeo mostra a demonstração automática. Clique em "Abrir ao vivo" para mexer na peça aqui mesmo.
A pílula de busca cresce e vira uma paleta de comandos. Digitar filtra cursos, guias e eventos, as setas movem um realce que desliza e Enter abre o item.
carregando…
"O que tem no INEMA.CLUB" em blocos de tamanhos diferentes. Uma moldura âmbar desliza até o bloco sob o mouse e ele acorda com uma mini-animação própria.
carregando…
"Esta página fugiu." Uma capivara corre e pula bugs enquanto a pessoa decide se volta ao INEMA.CLUB. Começa no piloto automático; o primeiro toque passa o controle.
carregando…
As letras I N E M A caem uma a uma e se empilham no chão do rodapé. Dá para agarrar e arremessar; "Arrumar letras" põe tudo de volta.
carregando…
O botão de tema é uma cena: o sol desce, a lua sobe, as janelas da escola acendem e a capivara dorme. As cores da página inteira trocam junto.
carregando…
Copie, troque o que está entre < > e cole no Claude, no Codex ou em qualquer IA que escreva código.
Construa <O QUE É, em uma frase: a peça + o que a pessoa faz com ela>. Aparência: - Fundo, cores e tipografia com valores exatos (hex, fonte, peso, tamanho relativo). - Layout: onde fica cada bloco e quanto da área ele ocupa (%). - Detalhes que dão personalidade (contorno, sombra, textura, ícones). Movimento: 1. <O que acontece ao entrar na tela> — duração em ms, ordem, atraso entre itens. 2. <O que acontece quando a pessoa interage> — passar o mouse, clicar, arrastar, teclar. 3. <A resposta física> — mola, quique, inércia, o "peso" das coisas. 4. <O estado final / de repouso>. 5. Modo demonstração: até alguém tocar, um cursor fantasma demonstra a interação sozinho. Regras: - JavaScript puro e CSS, sem biblioteca (ou: "<biblioteca> só para <função>"). - Um único loop requestAnimationFrame, pausado quando a peça sai da tela (IntersectionObserver). - Animar só transform e opacity; limitar devicePixelRatio a 2 em canvas. - Nunca capturar a rolagem da página; atalhos de teclado só com a peça em foco ou sob o mouse. - Acessível: elementos reais (button, a, input) com foco visível; teclado faz o mesmo que o mouse. - prefers-reduced-motion: mostrar o estado final, parado (descreva qual é). - Um arquivo HTML autocontido.
| Parte | Sem ela | Com ela |
|---|---|---|
| Aparência com valores exatos | cores e fontes "padrão de IA" | a peça já sai com a cara da marca |
| Movimento numerado com tempos | animação vaga, rápida ou lenta demais | ritmo intencional, fácil de ajustar ("passo 2 mais lento") |
| Modo demonstração | ninguém descobre que dá para interagir | a peça se explica sozinha e vira vídeo sem esforço |
| Pausar fora da tela | página pesada, bateria gasta | custo zero quando ninguém está vendo |
| Não capturar rolagem | a página "trava" quando o mouse passa por cima | a peça convive com o resto do site |
| Movimento reduzido | quem enjoa com movimento sofre | todos veem o conteúdo |
Testar e gravar os vídeos de novo pede Node, Playwright e ffmpeg. Para só usar, nada disso é necessário.
Abra o index.html da peça no navegador ou copie o arquivo para o seu site.
# nenhum comando
abrir pecas/dia-noite/index.htmlPara testar como num site de verdade (e para os scripts), sirva a pasta por HTTP.
python3 -m http.server 8850 \
--directory . --bind 127.0.0.1Node 18+, o pacote playwright e o ffmpeg no sistema.
npm i playwright npx playwright install chromium
Os passos 1 a 3 usam o que já está pronto. Os passos 4 e 5 são para criar uma peça nova com o molde.
Tudo é estático: peças, prompts, vídeos e os dois scripts.
git clone https://github.com/inematds/inema-motion-lab cd inema-motion-lab
Cada peça começa no modo demonstração. O primeiro toque, clique ou tecla passa o controle para você. Acrescente ?demo=1 na URL para a demonstração não parar.
python3 -m http.server 8850 --directory . --bind 127.0.0.1 # abra http://127.0.0.1:8850/pecas/busca-cmdk/ # ou http://127.0.0.1:8850/pecas/busca-cmdk/?demo=1
Cada peça ocupa a tela toda do seu próprio arquivo. O jeito mais simples é embutir num <iframe>; para integrar de verdade, copie o HTML, o CSS e o JS da peça para a sua página e troque textos e links.
<iframe src="pecas/bento-glide/index.html" title="O que tem no INEMA.CLUB" style="width:100%;aspect-ratio:16/9;border:0" loading="lazy"></iframe>
Preencha o molde (molde/MOLDE-PROMPT-ANIMACAO.md), salve como pecas/<nome>/PROMPT.md e peça à IA para escrever o index.html a partir dele. Use os cinco PROMPT.md como exemplo de nível de detalhe. Para ajustar, peça pelo número do passo: "no passo 1, 80 ms em vez de 120".
# exemplo com o Claude Code, na pasta do repositório claude "Leia pecas/minha-peca/PROMPT.md e escreva pecas/minha-peca/index.html obedecendo ao prompt."
O teste confere, em todas as peças: nenhum erro de JavaScript, nada de rolagem horizontal em 1280 e 360 px, a versão com movimento reduzido e se a peça trava a rolagem da página. A gravação gera, para cada peça, 8 s em WebM e MP4 mais uma imagem de capa em videos/.
python3 -m http.server 8850 --directory . --bind 127.0.0.1 & node tools/testar-pecas.cjs 8850 # 5/5 peças OK node tools/gravar-videos.cjs 8850 # OK busca-cmdk: webm 285 KB, mp4 349 KB … node tools/gravar-videos.cjs 8850 dia-noite # só uma peça
O laboratório está pronto para uso. Estas são as próximas etapas possíveis, ainda não feitas.