E1 · Seus quadros
10 minRode o bloco "seus quadros na página e verificar" (precisa da pasta de quadros da aula 2).
Pronto quando: quadros: 144 (frames/), OK: 3 de 3 posições e saída: 0.
Aula 3 · 18 min
Rolagem que controla o tempo: a skill de scroll cinemático
O motor que liga a rolagem aos quadros tem poucas peças, e cada uma resolve um engasgo medido. Você vê as peças, troca os quadros da página do kit pelos seus da aula 2, prova pelo contrato de teste que o quadro certo aparece em cada ponto e pede a página nova à skill scroll-film-studio, do INEMA.
Começar a aula
Nesta aula você vai
- 1As peças do motor: trilho, progresso, cabeça suavizada, janela de bitmaps
- 2O contrato de teste ?jump=[y] + window.__ready, e por que sem ele não há verificação
- 3Instalar a skill scroll-film-studio e pedir a página pela Lane A, sem gerador
- 4O portão de texto: a página vende, não narra a câmera
Objetivo: ligar seus quadros ao motor de rolagem do kit, provar pelo contrato ?jump e __ready e pedir a página à skill.
01O motor de rolagem por dentro
As peças do motor-rolagem.js (site-movimento, INEMA). Clique em cada uma.
Clique em cada bloco do diagrama para ver o que ele faz.
No site-movimento, a correção da janela de bitmaps levou a travada máxima na rolagem de 150–315 ms para 33–36 ms (README e comentário do motor, 18/10/2026).
02A página do kit com os seus quadros
Copie a página para uma pasta de ensaio, troque frames/ pelos quadros da aula 2 e verifique.
Terminal · seus quadros na página e verificar
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a3; rm -rf "$E/site"
cp -r "$K/site" "$E/site"; rm -rf "$E/site/frames"
cp -r "${TMPDIR:-/tmp}/ensaio-sites/a2/quadros" "$E/site/frames"
node "$K/scripts/servir.mjs" "$E/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 $STrecho · kit/site/site.js
filme = MotionEngine.Scrub({
canvas: document.getElementById('tela'), driver: secao, count: m.count, fps: m.fps || 24, dpr: 1,
maxCrop: VERT ? 0.8 : 0.22, bg: '#0c0c10',
frozen: parado,
src: function (i) { return m.dir + '/f_' + String(i + 1).padStart(4, '0') + '.jpg'; },Terminal · erro comum: página sem o contrato
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a3
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}erro-sem-contrato.html"; 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 três vezes com ?jump= no começo, no meio e no fim do trilho e lê o quadro do motor.
Chromium 156.0.8078.4 (Playwright 1.64.0) · 1366×768 FALHA: a página não marcou window.__ready em 15 s (falta o contrato ?jump + __ready) saída: 1
A cópia erro-sem-contrato.html não chama MotionEngine.ready: a página funciona para quem rola com a mão, mas nenhum teste sabe quando olhar.
03O contrato de teste
Duas linhas que as duas skills do INEMA pedem em toda página que elas constroem.
1. ?jump=[y]
A página lê o parâmetro jump da URL e rola até y pixels antes de qualquer coisa, sem rolagem suave. Abrir a página em 50% vira uma URL.
O motor do kit faz isso em MotionEngine.ready.
2. __ready
Depois de posicionar e desenhar, a página marca window.__ready = true. O teste espera essa marca em vez de esperar um tempo fixo.
Esperar 2 s "para dar tempo" passa na sua máquina e falha numa máquina carregada.
3. O que dá
Captura de tela, verificador e o agente conferindo o próprio trabalho, todos pelo mesmo caminho.
O verify.js da skill recusa capturar a tela se __ready nunca chegar.
04A skill scroll-film-studio
Skill do INEMA para Codex e Claude Code: entrevista, conceitos, direção de arte, página e portões. Duas pistas: Lane A só código (sem custo) e Lane B com filme do seu gerador. O verificar.mjs do kit lê os ganchos do kit (seção [data-filme], canvas #tela, window.__filme e window.__filmeInfo) além do contrato; por isso o prompt manda a skill partir de kit/site. Página feita do zero pela skill confere com o verify.js dela.
Terminal · baixar a skill e ver o que ela traz
E=${TMPDIR:-/tmp}/ensaio-sites/a3; rm -rf "$E"; mkdir -p "$E"; cd "$E"
git clone -q https://github.com/inematds/scroll-film-studio && git -C scroll-film-studio checkout -q 9d64875; echo "clone: $?"
cd scroll-film-studio/skills/scroll-film-studio
ls; ls references scripts
sed -n 2p SKILL.mdUma vez · instalar no seu agente
git clone https://github.com/inematds/scroll-film-studio ~/projetos/scroll-film-studio mkdir -p ~/.claude/skills ~/.codex/skills ln -s ~/projetos/scroll-film-studio/skills/scroll-film-studio ~/.claude/skills/scroll-film-studio ln -s ~/projetos/scroll-film-studio/skills/scroll-film-studio ~/.codex/skills/scroll-film-studio # Codex que não achar a skill em ~/.codex/skills: use ~/.agents/skills
Prompt · pedir a página à skill (Lane A)
Use a skill scroll-film-studio na Lane A (só código, sem gerar vídeo). Produto: <nome e uma frase do que ele é>. Para quem: <quem compra>. O filme de abertura usa os quadros que já estão em frames/ (manifest.json com a contagem). Texto: só o que está neste arquivo: <caminho do seu texto>. Não invente número nem depoimento. Regras fixas: página estática, sem build; parta de kit/site (motor-rolagem.js e site.js) e mude só o visual e o texto, mantendo a seção [data-filme], o canvas #tela, window.__filme, window.__filmeInfo, o contrato ?jump=<y> + window.__ready e o modo parado com reduzir movimento. Pronto quando: node ~/projetos/formacao-cinema-ia-sites-v72/kit/scripts/verificar.mjs <url> responde OK: 3 de 3 posições.
Exemplo do repositório
clone: 0 agents references scripts SKILL.md references: engine.md finishing.md playbook.md scripts: assemble.sh chain-step.sh continuity-gate.sh copy-gate.js kie-chain.py package.json package-lock.json shot.js vector-check.py verify.js name: scroll-film-studio
A skill foi escrita em jul/2026 e cita geradores pelo nome daquela época para a Lane B. Qual gerador usar hoje é assunto do curso 1; aqui a Lane A basta.
05O portão de texto da skill
O texto sobre o filme vende o produto. Se ele narra a câmera ("a câmera avança") ou manda rolar, é roteiro de filmagem vazando para a página. O copy-gate.js reprova.
Terminal · texto limpo e texto que narra a câmera
K=~/projetos/formacao-cinema-ia-sites-v72/kit
G=${TMPDIR:-/tmp}/ensaio-sites/a3/scroll-film-studio/skills/scroll-film-studio/scripts/copy-gate.js
node "$G" "$K/site/index.html"; echo "saída: $?"
node "$G" "$K/exemplos/texto-ruim.html" 2>&1 | head -5; echo "saída: ${PIPESTATUS[0]}"Exemplo do repositório
✓ ~/projetos/formacao-cinema-ia-sites-v72/kit/site/index.html — copy clean
saída: 0
✗ ~/projetos/formacao-cinema-ia-sites-v72/kit/exemplos/texto-ruim.html — 5 copy defect(s)
line 6: narrates the scroll instead of performing it
…ction class="beat">Aurora 35As you scroll, the camera pushes in through the glass…
line 7: instructs the visitor to scroll
…s="beat">One continuous takeKeep scrolling to see the reveal. </body…
saída: 1O copy-gate.js lê inglês. Para páginas em português e espanhol, o site-movimento tem um portão de texto equivalente, que você roda na aula 6.
06Prática
Seus quadros na página, o contrato provado e a skill instalada.
E2 · Sem contrato
5 minRode o verificador contra erro-sem-contrato.html (bloco "erro comum: página sem o contrato") e depois abra kit/site/site.js e ache a linha que chama MotionEngine.ready.
Pronto quando: FALHA: a página não marcou window.__ready em 15 s com saída: 1.
E3 · A skill
15 minRode "baixar a skill" e instale no seu agente. Rode o portão de texto. Opcional: peça a página pelo prompt da Lane A com o seu produto, numa pasta nova.
Pronto quando: ls ~/.claude/skills/scroll-film-studio/SKILL.md (ou ~/.codex/skills/…) mostra o arquivo, e o bloco do portão de texto mostra copy clean e depois saída: 1.
07Teste da aula
A explicação aparece depois da sua resposta.
Pergunta 1 de 4
A rolagem trava quando você rola rápido pela primeira vez. Qual peça do motor resolve isso?
Correto
O engasgo é a decodificação do JPEG na hora de desenhar. A janela decodifica antes, fora da linha principal. Pré-carregar tudo pesa e não evita a decodificação; densidade 2 dobra o trabalho.Não é essa
O engasgo é a decodificação do JPEG na hora de desenhar. A janela decodifica antes, fora da linha principal. Pré-carregar tudo pesa e não evita a decodificação; densidade 2 dobra o trabalho.Rever: O motor de rolagem por dentroPergunta 2 de 4
Por que o verificador espera window.__ready em vez de esperar 2 segundos?
Correto
Tempo fixo é chute: numa máquina carregada o desenho atrasa e o teste lê a tela preta. A marca __ready diz exatamente quando olhar.Não é essa
Tempo fixo é chute: numa máquina carregada o desenho atrasa e o teste lê a tela preta. A marca __ready diz exatamente quando olhar.Rever: O contrato de testePergunta 3 de 4
Qual destas frases o portão de texto reprova sobre o filme de uma lente?
Correto
Narrar a câmera é roteiro de filmagem, não texto para quem compra. A pessoa já está vendo o filme; o texto diz o que a imagem não diz.Não é essa
Narrar a câmera é roteiro de filmagem, não texto para quem compra. A pessoa já está vendo o filme; o texto diz o que a imagem não diz.Rever: A página do kit com os seus quadrosPergunta 4 de 4
Na skill scroll-film-studio, o que muda entre a Lane A e a Lane B?
Correto
Lane A: movimento em código, custo zero. Lane B: filme gerado em clipes encadeados, com a conta e os créditos do seu gerador.Não é essa
Lane A: movimento em código, custo zero. Lane B: filme gerado em clipes encadeados, com a conta e os créditos do seu gerador.Rever: A página do kit com os seus quadrosTeste 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
MotorTrilho, progresso, cabeça suavizada, janela de bitmaps, carga 1 em 8.
Contrato?jump=[y] posiciona, window.__ready avisa: sem ele não há teste.
Skillscroll-film-studio pela Lane A, com portão de texto.