E1 · Instalar
10 minClone o curso e rode o bloco "instalar o kit".
Pronto quando: A saída mostra npm ci: 0, chromium: 0 e Version 1.64.0.
Aula 1 · 15 min
O que é um site cinematográfico e quando ele vale o peso
Um site cinematográfico parece um filme que anda com a rolagem. Por baixo, não há 3D nem vídeo tocando: há quadros de um clipe desenhados num canvas, um por posição da rolagem. Isso pesa. Nesta aula você roda a página de exemplo do kit, mede quanto ela pesa para cada visitante e decide, com um número, se o seu produto pede uma.
Começar a aula
Nesta aula você vai
- 1O caminho clipe → quadros → canvas → rolagem, e por que não é um vídeo tocando
- 2Instalar o kit e ver a página de exemplo passar no verificador
- 3Medir o peso por visitante: computador, celular e primeira pintura
- 4Decidir com um orçamento em MB, antes de gastar com gerador
Objetivo: rodar o site de exemplo do kit, medir o peso dele e decidir, com um orçamento em MB, se o seu produto pede um.
01O filme que anda com a rolagem
Clique em cada etapa. A volta é a pergunta que decide tudo: quanto isso pesa?
Clique em cada bloco do diagrama para ver o que ele faz.
O efeito "3D" vem do clipe, não de um motor 3D. Profundidade desenhada em código é a aula 4.
02Quando vale e quando não vale
O filme custa banda do visitante e tempo seu. Ele se paga em poucos casos.
1. Vale
Produto com forma, material ou mecanismo que se entende melhor em movimento: uma lente, um relógio, uma peça de máquina, um prato.
Página de lançamento, que o visitante abre uma vez e olha com calma.
2. Não vale
Página que a pessoa lê com pressa: serviço, preço, artigo, painel. O filme atrasa o que ela veio buscar.
Quando o produto não muda nada ao girar ou se aproximar: um texto bem escrito vende melhor.
3. Sem gerador
As duas skills do INEMA (aulas 3 e 6) têm um caminho só com código: formas, luz e texto animados pela rolagem, sem gerar vídeo. Zero crédito.
Este curso inteiro roda assim: os clipes de ensaio saem de uma foto com ffmpeg.
4. Com gerador
Clipes do seu gerador viram quadros. Quanto custa depende do gerador: o piloto do site-movimento gastou 300 créditos de Kling 3.0 (kling-video-v3_0) em 720p (README do projeto, 18/10/2026).
Qual gerador e qual versão: curso 1 da formação.
03Instalar o kit
O kit fica dentro do repositório deste curso. Clone uma vez e instale; ele usa Node 20.10+, ffmpeg e o Chromium do Playwright.
Uma vez · clonar o curso
cd ~/projetos && git clone https://github.com/inematds/formacao-cinema-ia-sites-v72
Terminal · instalar o kit
cd ~/projetos/formacao-cinema-ia-sites-v72/kit
npm ci --no-audit --no-fund > ${TMPDIR:-/tmp}/npm-sites.log 2>&1; echo "npm ci: $?"
npx playwright install chromium > ${TMPDIR:-/tmp}/pw-sites.log 2>&1; echo "chromium: $?"
npx playwright --version
npm ls --depth=0 | tail -2
ffmpeg -version | head -1 | cut -d' ' -f1-3Exemplo do repositório
npm ci: 0 chromium: 0 Version 1.64.0 └── three@0.186.1 ffmpeg version 6.1.1-3ubuntu5
O Playwright fica fixo em 1.64.0 e o three em 0.186.1 no package.json do kit: o que você instala é o que foi testado.
04Ver a página de exemplo funcionando
O servidor do kit pega uma porta livre e escreve a URL num arquivo; o laço espera a URL responder antes de testar.
Terminal · servir e verificar a página do kit
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a1; rm -rf "$E"; mkdir -p "$E"
node "$K/scripts/servir.mjs" "$K/site" > "$E/url.txt" & S=$!
until U=$(cat "$E/url.txt") && [ -n "$U" ] && curl -s -o /dev/null "$U"; do sleep 0.3; done
node "$K/scripts/verificar.mjs" "$U"; echo "saída: $?"
kill $SExemplo do repositório
Chromium 156.0.8078.4 (Playwright 1.64.0) · 1366×768 quadros: 144 (frames/) rolagem 0% → quadro 0 · tela pintada rolagem 50% → quadro 72 · tela pintada rolagem 100% → quadro 143 · tela pintada transbordo horizontal: não OK: 3 de 3 posições saída: 0
O verificador abre a página em três pontos da rolagem e confere o quadro e a tela. Para olhar com os seus olhos, rode só a 1ª linha do servidor e abra a URL no navegador.
05Medir o peso por visitante
Cada visitante baixa um filme só: o horizontal no computador ou o vertical no celular em pé.
Terminal · peso com orçamento de 6 MB
K=~/projetos/formacao-cinema-ia-sites-v72/kit python3 "$K/scripts/peso.py" "$K/site" --orcamento 6 --inicial 0.5; echo "saída: $?"
Terminal · erro comum: orçamento de 2 MB
K=~/projetos/formacao-cinema-ia-sites-v72/kit
python3 "$K/scripts/peso.py" "$K/site" --orcamento 2 | tail -1; echo "saída: ${PIPESTATUS[0]}"Exemplo do repositório
PESO: quadros-v 3,49 · quadros 1,50 · js 0,02 · html/css 0,01 (MB) computador: tudo 1,54 MB · primeira pintura 0,05 MB · rascunho (1 em 8) 0,22 MB celular: tudo 3,52 MB · primeira pintura 0,06 MB · rascunho (1 em 8) 0,47 MB primeira pintura 0,06 MB · teto 0,5 MB: DENTRO visitante mais pesado 3,52 MB · orçamento 6,0 MB: DENTRO do orçamento saída: 0
Primeira pintura é um teto do que chega antes do primeiro quadro: conta todo arquivo da pasta que não é quadro. O celular pesa mais que o computador aqui: a aula 7 corrige.
visitante mais pesado 3,52 MB · orçamento 2,0 MB: ACIMA do orçamento saída: 1
Com orçamento de 2 MB, o celular passa do teto e o script sai com 1. É esse código que um portão automático lê.
06Prática
Do kit instalado à sua decisão escrita.
E2 · Ver funcionando
5 minRode o bloco "servir e verificar a página do kit". Depois abra a URL no seu navegador e role a página.
Pronto quando: OK: 3 de 3 posições e saída: 0.
E3 · Sua decisão com número
10 minEscolha um produto seu. Num arquivo decisao.txt, escreva três linhas: Produto: …, Visitante mais pesado: … MB (o número do kit, ou o seu se já tiver quadros) e Decisão: … (filme, só código ou página comum, com o motivo).
Pronto quando: grep -c -E "^(Produto|Visitante mais pesado|Decisão):" decisao.txt responde 3.
07Teste da aula
A explicação aparece depois da sua resposta.
Pergunta 1 de 4
Por que o filme da rolagem é desenhado quadro a quadro num canvas, e não com um vídeo e currentTime?
Correto
A busca (seek) no vídeo tem atraso e o resultado engasga. O canvas desenha uma imagem já decodificada. O preço é o peso: uma imagem por quadro.Não é essa
A busca (seek) no vídeo tem atraso e o resultado engasga. O canvas desenha uma imagem já decodificada. O preço é o peso: uma imagem por quadro.Rever: O filme que anda com a rolagemPergunta 2 de 4
O peso.py diz "computador 1,54 MB · celular 3,52 MB". Qual número vai para o orçamento?
Correto
Cada visitante baixa um filme só. O orçamento vale para quem paga mais, aqui o celular. Somar os dois conta um visitante que não existe.Não é essa
Cada visitante baixa um filme só. O orçamento vale para quem paga mais, aqui o celular. Somar os dois conta um visitante que não existe.Rever: Instalar o kitPergunta 3 de 4
Para qual destas páginas o filme na rolagem tem menos chance de valer o peso?
Correto
Quem abre uma tabela de preços quer o número, rápido. O filme atrasa o que a pessoa veio buscar. Produto com forma e material é o caso clássico.Não é essa
Quem abre uma tabela de preços quer o número, rápido. O filme atrasa o que a pessoa veio buscar. Produto com forma e material é o caso clássico.Rever: Quando vale e quando não valePergunta 4 de 4
O que é a "primeira pintura" no peso.py?
Correto
É um peso, não um tempo: o que precisa chegar para a tela deixar de ser preta. Tempo de carregamento e Core Web Vitals são da Formação inemaSEO.Não é essa
É um peso, não um tempo: o que precisa chegar para a tela deixar de ser preta. Tempo de carregamento e Core Web Vitals são da Formação inemaSEO.Rever: Instalar o kitTeste concluído
Você acertou {a} de {n}. Acertando todas, a aula é marcada como concluída.Escolha uma alternativa. A explicação aparece depois da sua tentativa.
08Em três frases
MecânicaClipe vira quadros; a rolagem escolhe o quadro; o canvas desenha.
CustoPeso por visitante: computador, celular e primeira pintura.
DecisãoCom um orçamento em MB, antes de gastar com gerador.