E1 · Install
10 minRun "clonar, instalar e testar".
Done when: npm ci: 0, hyperframes 0.8.134, and ℹ fail 0.
Lesson 5 · 18 min
Brand film from your own site
So far the video became a page. Now the reverse path: the page becomes a video. filmarca (INEMA) reads the colors, fonts, logo, copy, and screenshots of a site and builds a brand film in HyperFrames. You run the whole path against the kit's page without calling any model, using filmarca's own template scenes, and then you put the film on the page.
Start the lesson
In this lesson you will
- 1The DNA: what filmarca reads from a site and where it gets it wrong
- 2A script built from facts on the page and the six template scenes (opening, title, number, screenshot, list, call to action)
- 3Local render, no model: the rehearsal that proves the path before you spend anything
- 4The film back on the page, without weighing down the first paint
Goal: read the kit site's DNA with filmarca and render a brand film with template scenes, without calling a model.
01From site to brand film
filmarca's steps. Click each one.
Click each block in the diagram to see what it does.
filmarca pins hyperframes 0.8.134 in its package-lock (10/19/2026); course 3 teaches 0.8.176. Use the project's lock: it's the one its tests passed on.
02Install filmarca
In a rehearsal folder, at the tested commit. The project's npm test runs without a model.
Terminal · clone, install, and test
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)"Example from the repository
clone: 0 npm ci: 0 hyperframes 0.8.134 · playwright 1.63.0 chromium: 0 ℹ pass 5 ℹ fail 0
The 5 tests prove that a broken scene is rejected and that the template scene takes its place.
03Read the DNA of the kit's page
The kit's server serves the lens page; filmarca reads it the way it would read any site.
Terminal · DNA of the kit's site
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"Example from the repository
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
Note the primary color: #e2a23b is the yellow of the motion switch (Parado / Ligado), not the brand's accent. The DNA reads what shows on screen. Check marca.json before you generate, and fix by hand whatever is wrong.
04Render without a model
A script built from facts on the page (kit/filmarca/roteiro.json) and filmarca's template scenes in place of the scenes step.
Terminal · template scenes, render, and check
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: $?"File · 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 }
]
}Example from the repository
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
Five scenes, 17.5 s, draft render in seconds. "lint com avisos" is a warning, not an error: the MP4 came out and passed the checker.
05With the model from your subscription, and back on the page
The real step swaps the hand-written script and the template scenes for the director and the scenes animated by the model. Then the MP4 goes into the page.
With the model · script, scenes, and 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
File · 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>06Practice
The whole rehearsal, and the film on the page.
E2 · DNA and film without a model
10 minRun "dna do site do kit" and then "cenas-modelo, render e conferir".
Done when: dna: 0, render: 0, and OK: 17,5 s · 1920×1080 with saída: 0.
E3 · The film on the page
15 minIn a copy of the kit's page, create the filme/ folder, copy the MP4, and grab the poster (ffmpeg -ss 2 -i filme/aurora-35-pt-16x9.mp4 -frames:v 1 filme/poster.jpg). Paste the section from kit/exemplos/video-da-marca.html before the spec sheet and run peso.py with --inicial 0.5.
Done when: peso.py shows vídeo on the PESO line and primeira pintura … DENTRO.
07Lesson quiz
The explanation appears after you answer.
Question 1 of 4
Which filmarca step runs with no model at all?
Correct
The dna is Playwright reading the page: colors, fonts, logo, texts, and screenshots. Script, scenes, and translation use the model from your subscription; in the rehearsal, the script is hand-written and the scenes are the template scenes.Not that one
The dna is Playwright reading the page: colors, fonts, logo, texts, and screenshots. Script, scenes, and translation use the model from your subscription; in the rehearsal, the script is hand-written and the scenes are the template scenes.Review: From site to brand filmQuestion 2 of 4
The DNA returned the primary color #e2a23b, which is the color of the motion key. What do you do?
Correct
The DNA reads what shows on screen, and a colored button counts as a color. marca.json is yours: fixing one line costs less than redoing scenes.Not that one
The DNA reads what shows on screen, and a colored button counts as a color. marca.json is yours: fixing one line costs less than redoing scenes.Review: Install filmarcaQuestion 3 of 4
A scene written by the model was rejected twice by the check. What does filmarca do?
Correct
Once rejected, the model fixes it one time; if it fails again, the template scene steps in. The film always comes out, and the review page shows which scene is a template.Not that one
Once rejected, the model fixes it one time; if it fails again, the template scene steps in. The film always comes out, and the review page shows which scene is a template.Review: From site to brand filmQuestion 4 of 4
Why does the brand video go into the page with preload="none"?
Correct
With preload="none" and a poster, the browser only downloads the video on play. The first paint stays the same; peso.py counts the video in the total, not at the start.Not that one
With preload="none" and a poster, the browser only downloads the video on play. The first paint stays the same; peso.py counts the video in the total, not at the start.Review: Install filmarcaQuiz complete
You got {a} of {n} right. Get them all right and the lesson is marked as complete.Choose an option. The explanation appears after your attempt.
08In three sentences
DNAfilmarca reads the site without a model; check marca.json.
RehearsalHandwritten script + template scenes + local render = a film without spending anything.
BackMP4 with a poster and preload="none" in a section of the page.