E1 · Instalar
10 minRode "clonar, instalar e testar".
Pronto quando: npm ci: 0, hyperframes 0.8.134 e ℹ fail 0.
Aula 5 · 18 min
Filme da marca a partir do próprio site
Até aqui o vídeo virou página. Agora o caminho inverso: a página vira vídeo. O filmarca (INEMA) lê cores, fontes, logo, textos e prints de um site e monta um filme da marca em HyperFrames. Você roda o caminho inteiro contra a página do kit sem chamar modelo nenhum, com as cenas-modelo do próprio filmarca, e depois põe o filme na página.
Começar a aula
Nesta aula você vai
- 1O DNA: o que o filmarca lê de um site e onde ele erra
- 2Roteiro com fatos da página e as seis cenas-modelo (abertura, título, número, print, lista, chamada)
- 3Render local, sem modelo: o ensaio que prova o caminho antes de gastar
- 4O filme de volta na página, sem pesar na primeira pintura
Objetivo: ler o DNA do site do kit com o filmarca e renderizar um filme da marca com cenas-modelo, sem chamar modelo.
01Do site ao filme da marca
As etapas do filmarca. Clique em cada uma.
Clique em cada bloco do diagrama para ver o que ele faz.
O filmarca fixa hyperframes 0.8.134 no package-lock dele (19/10/2026); o curso 3 ensina a 0.8.176. Use o lock do projeto: é o que os testes dele passaram.
02Instalar o filmarca
Numa pasta de ensaio, no commit testado. O npm test do projeto roda sem modelo.
Terminal · clonar, instalar e testar
E=${TMPDIR:-/tmp}/ensaio-sites/a5; rm -rf "$E"; mkdir -p "$E"; cd "$E"
git clone -q https://github.com/inematds/filmarca && cd filmarca && git checkout -q 0c0356c; echo "clone: $?"
npm ci --no-audit --no-fund > npm.log 2>&1; echo "npm ci: $?"
node -p "'hyperframes ' + require('hyperframes/package.json').version + ' · playwright ' + require('playwright/package.json').version"
npx playwright install chromium > pw.log 2>&1; echo "chromium: $?"
npm test 2>&1 | grep -E "^ℹ (pass|fail)"Exemplo do repositório
clone: 0 npm ci: 0 hyperframes 0.8.134 · playwright 1.63.0 chromium: 0 ℹ pass 5 ℹ fail 0
Os 5 testes provam que uma cena quebrada é recusada e que a cena-modelo entra no lugar.
03Ler o DNA da página do kit
O servidor do kit serve a página da lente; o filmarca lê como leria qualquer site.
Terminal · dna do site do kit
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a5; cd "$E/filmarca"
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 bin/filmarca.mjs dna "$U" --out "$E/filme"; echo "dna: $?"
kill $S
ls "$E/filme/assets"Exemplo do repositório
lendo http://127.0.0.1:<porta>/ marca: Aurora 35 · cores #0c0c10 #f3efe7 #e2a23b #e2a23b #0b0b0d · fontes Georgia / system-ui · logo assets/logo.svg dna: 0 fonts logo.svg print-1.png print-2.png print-3.png print-celular.png print-topo.png
Repare na cor primária: #e2a23b é o amarelo da chave de movimento (Parado / Ligado), não o detalhe da marca. O DNA lê o que aparece na tela. Confira o marca.json antes de gerar e corrija à mão o que estiver errado.
04Render sem modelo
Um roteiro com fatos da página (kit/filmarca/roteiro.json) e as cenas-modelo do filmarca no lugar do passo cenas.
Terminal · cenas-modelo, render e conferir
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a5; cd "$E/filmarca"
export HYPERFRAMES_NO_TELEMETRY=1
cp "$K/filmarca/roteiro.json" "$E/filme/"
node "$K/scripts/cenas-modelo.mjs" . "$E/filme"
node bin/filmarca.mjs render "$E/filme" --formatos 16x9 --rascunho; echo "render: $?"
python3 "$K/scripts/conferir-video.py" "$E/filme/renders/aurora-35-pt-16x9.mp4" 17.5 1920x1080; echo "saída: $?"Arquivo · kit/filmarca/roteiro.json
{
"titulo": "Aurora 35",
"conceito": "a lente apresentada só com o que a página dela diz: luz baixa, abertura, ficha e reserva",
"lang": "pt",
"cenas": [
{ "id": "c1", "tipo": "abertura", "duracao": 3.5, "textos": { "frase": "Feita para a cena que acontece com pouca luz." }, "direcao": "", "midia": null },
{ "id": "c2", "tipo": "numero", "duracao": 3, "textos": { "numero": "f/1.4", "legenda": "para filmar no fim da tarde sem subir o ISO" }, "direcao": "", "midia": null },
{ "id": "c3", "tipo": "print", "duracao": 3.5, "textos": { "legenda": "Lente prime de 35 mm" }, "direcao": "", "midia": "assets/print-topo.png" },
{ "id": "c4", "tipo": "lista", "duracao": 4, "textos": { "titulo": "Ficha técnica", "itens": ["35 mm", "f/1.4 a f/16", "Encaixe PL e EF", "780 g"] }, "direcao": "", "midia": null },
{ "id": "c5", "tipo": "cta", "duracao": 3.5, "textos": { "chamada": "Reserve a sua", "botao": "Reservar a Aurora 35" }, "direcao": "", "midia": null }
]
}Exemplo do repositório
cenas-modelo: 5 cenas · 17,5 s · marca Aurora 35 · logo assets/logo.svg ✓ renders/aurora-35-pt-16x9.mp4 · 8 s (lint com avisos) /tmp/ensaio-sites/a5/filme/renders/aurora-35-pt-16x9.mp4 render: 0 OK: 17,5 s · 1920×1080 · 30 fps · sem áudio saída: 0
Cinco cenas, 17,5 s, render de rascunho em segundos. "lint com avisos" é aviso, não erro: o MP4 saiu e passou no conferidor.
05Com o modelo da sua assinatura, e de volta na página
O passo real troca o roteiro escrito à mão e as cenas-modelo pelo diretor e pelas cenas animadas pelo modelo. Depois, o MP4 entra na página.
Com o modelo · roteiro, cenas e render
cd <pasta-do-filmarca> node bin/filmarca.mjs roteiro <pasta-do-filme> --pedido "filme de apresentação da lente para a página" --motor claude node bin/filmarca.mjs cenas <pasta-do-filme> --motor claude node bin/filmarca.mjs render <pasta-do-filme> --formatos 16x9,9x16 --rascunho
Arquivo · kit/exemplos/video-da-marca.html
<!-- O filme da marca numa seção comum da página: só baixa e toca quando a pessoa pede. -->
<section class="secao" id="filme-da-marca">
<h2>A Aurora 35 em 17 segundos</h2>
<video src="filme/aurora-35-pt-16x9.mp4" poster="filme/poster.jpg"
controls muted playsinline preload="none" width="1280" height="720"
style="width:100%;height:auto;border-radius:14px"></video>
</section>06Prática
O ensaio inteiro, e o filme na página.
E2 · DNA e filme sem modelo
10 minRode "dna do site do kit" e depois "cenas-modelo, render e conferir".
Pronto quando: dna: 0, render: 0 e OK: 17,5 s · 1920×1080 com saída: 0.
E3 · O filme na página
15 minNuma cópia da página do kit, crie a pasta filme/, copie o MP4 e tire o pôster (ffmpeg -ss 2 -i filme/aurora-35-pt-16x9.mp4 -frames:v 1 filme/poster.jpg). Cole a seção de kit/exemplos/video-da-marca.html antes da ficha técnica e rode o peso.py com --inicial 0.5.
Pronto quando: O peso.py mostra vídeo na linha PESO e primeira pintura … DENTRO.
07Teste da aula
A explicação aparece depois da sua resposta.
Pergunta 1 de 4
Qual etapa do filmarca roda sem modelo nenhum?
Correto
O dna é Playwright lendo a página: cores, fontes, logo, textos e prints. Roteiro, cenas e tradução usam o modelo da sua assinatura; no ensaio, o roteiro é escrito à mão e as cenas são as cenas-modelo.Não é essa
O dna é Playwright lendo a página: cores, fontes, logo, textos e prints. Roteiro, cenas e tradução usam o modelo da sua assinatura; no ensaio, o roteiro é escrito à mão e as cenas são as cenas-modelo.Rever: Do site ao filme da marcaPergunta 2 de 4
O DNA deu a cor primária #e2a23b, que é a cor da chave de movimento. O que fazer?
Correto
O DNA lê o que aparece na tela, e um botão colorido conta como cor. O marca.json é seu: corrigir uma linha custa menos que refazer cenas.Não é essa
O DNA lê o que aparece na tela, e um botão colorido conta como cor. O marca.json é seu: corrigir uma linha custa menos que refazer cenas.Rever: Instalar o filmarcaPergunta 3 de 4
Uma cena escrita pelo modelo foi recusada duas vezes pela conferência. O que o filmarca faz?
Correto
Recusada, o modelo corrige uma vez; falhou de novo, entra a cena-modelo. O filme sempre sai, e a página de revisão mostra qual cena é modelo.Não é essa
Recusada, o modelo corrige uma vez; falhou de novo, entra a cena-modelo. O filme sempre sai, e a página de revisão mostra qual cena é modelo.Rever: Do site ao filme da marcaPergunta 4 de 4
Por que o vídeo da marca entra na página com preload="none"?
Correto
Com preload="none" e pôster, o navegador só baixa o vídeo no play. A primeira pintura continua a mesma; o peso.py conta o vídeo no total, não no início.Não é essa
Com preload="none" e pôster, o navegador só baixa o vídeo no play. A primeira pintura continua a mesma; o peso.py conta o vídeo no total, não no início.Rever: Instalar o filmarcaTeste 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
DNAO filmarca lê o site sem modelo; confira o marca.json.
EnsaioRoteiro à mão + cenas-modelo + render local = filme sem gastar nada.
De voltaMP4 com pôster e preload="none" numa seção da página.