E1 · Install
10 minClone the course and run the "instalar o kit" block.
Done when: The output shows npm ci: 0, chromium: 0 and Version 1.64.0.
Lesson 1 · 15 min
What a cinematic site is and when it's worth the weight
A cinematic site looks like a film that moves with the scroll. Underneath, there's no 3D and no video playing: there are frames from a clip drawn on a canvas, one per scroll position. That's heavy. In this lesson you run the kit's example page, measure how much it weighs for each visitor, and decide, with a number, whether your product calls for one.
Start the lesson
In this lesson you will
- 1The path clip → frames → canvas → scroll, and why it isn't a video playing
- 2Install the kit and watch the example page pass the checker
- 3Measure the weight per visitor: computer, phone, and first paint
- 4Decide with a budget in MB, before spending on a generator
Goal: run the kit's example site, measure its weight, and decide, with a budget in MB, whether your product calls for one.
01The film that moves with the scroll
Click each step. The loop back is the question that decides everything: how much does this weigh?
Click each block in the diagram to see what it does.
The "3D" effect comes from the clip, not from a 3D engine. Depth drawn in code is lesson 4.
02When it's worth it and when it isn't
The film costs the visitor bandwidth and costs you time. It pays off in only a few cases.
1. Worth it
A product with a shape, material, or mechanism that is easier to understand in motion: a lens, a watch, a machine part, a dish.
A launch page, which the visitor opens once and looks at calmly.
2. Not worth it
A page people read in a hurry: service, pricing, article, dashboard. The film delays what they came for.
When the product doesn't change at all as it rotates or comes closer: well-written text sells better.
3. No generator
The two INEMA skills (lessons 3 and 6) have a code-only path: shapes, light, and text animated by scrolling, with no video generation. Zero credits.
This entire course runs that way: the rehearsal clips are made from a photo with ffmpeg.
4. With a generator
Clips from your generator become frames. How much it costs depends on the generator: the site-movimento pilot spent 300 Kling 3.0 credits (kling-video-v3_0) at 720p (project README, 10/18/2026).
Which generator and which version: course 1 of the program.
03Install the kit
The kit lives inside this course's repository. Clone it once and install; it uses Node 20.10+, ffmpeg, and Playwright's Chromium.
Once · clone the course
cd ~/projetos && git clone https://github.com/inematds/formacao-cinema-ia-sites-v72
Terminal · install the 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-3Example from the repository
npm ci: 0 chromium: 0 Version 1.64.0 └── three@0.186.1 ffmpeg version 6.1.1-3ubuntu5
Playwright is pinned to 1.64.0 and three to 0.186.1 in the kit's package.json: what you install is what was tested.
04See the example page working
The kit's server picks a free port and writes the URL to a file; the loop waits for the URL to respond before testing.
Terminal · serve and check the kit's page
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 $SExample from the repository
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
The checker opens the page at three scroll points and verifies the frame and the screen. To look with your own eyes, run only the 1st line of the server and open the URL in your browser.
05Measure the weight per visitor
Each visitor downloads just one film: the horizontal one on a computer or the vertical one on a phone held upright.
Terminal · weight with a 6 MB budget
K=~/projetos/formacao-cinema-ia-sites-v72/kit python3 "$K/scripts/peso.py" "$K/site" --orcamento 6 --inicial 0.5; echo "saída: $?"
Terminal · common mistake: 2 MB budget
K=~/projetos/formacao-cinema-ia-sites-v72/kit
python3 "$K/scripts/peso.py" "$K/site" --orcamento 2 | tail -1; echo "saída: ${PIPESTATUS[0]}"Example from the repository
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
First paint is a ceiling on what arrives before the first frame: it counts every file in the folder that is not a frame. The phone weighs more than the desktop here: lesson 7 fixes that.
visitante mais pesado 3,52 MB · orçamento 2,0 MB: ACIMA do orçamento saída: 1
With a 2 MB budget, the phone goes over the ceiling and the script exits with 1. This is the code an automatic gate reads.
06Practice
From the installed kit to your written decision.
E2 · See it working
5 minRun the "servir e verificar a página do kit" block. Then open the URL in your browser and scroll the page.
Done when: OK: 3 de 3 posições and saída: 0.
E3 · Your decision, with a number
10 minPick one of your products. In a file called decisao.txt, write three lines: Produto: …, Visitante mais pesado: … MB (the kit's number, or your own if you already have frames) and Decisão: … (movie, code only, or a regular page, with the reason).
Done when: grep -c -E "^(Produto|Visitante mais pesado|Decisão):" decisao.txt returns 3.
07Lesson quiz
The explanation appears after you answer.
Question 1 of 4
Why is the scroll film drawn frame by frame on a canvas, instead of using a video and currentTime?
Correct
Seeking in the video has a delay, and the result stutters. The canvas draws an image that's already decoded. The price is weight: one image per frame.Not that one
Seeking in the video has a delay, and the result stutters. The canvas draws an image that's already decoded. The price is weight: one image per frame.Review: The film that moves with the scrollQuestion 2 of 4
peso.py says "computador 1,54 MB · celular 3,52 MB". Which number goes into the budget?
Correct
Each visitor downloads only one film. The budget applies to whoever pays the most, here the phone. Adding both counts a visitor who doesn't exist.Not that one
Each visitor downloads only one film. The budget applies to whoever pays the most, here the phone. Adding both counts a visitor who doesn't exist.Review: Install the kitQuestion 3 of 4
For which of these pages is the scroll film least likely to be worth the weight?
Correct
Someone opening a pricing table wants the number, fast. The film delays what the person came for. A product with shape and material is the classic case.Not that one
Someone opening a pricing table wants the number, fast. The film delays what the person came for. A product with shape and material is the classic case.Review: When it's worth it and when it isn'tQuestion 4 of 4
What is the "first paint" in peso.py?
Correct
It's a weight, not a time: what has to arrive for the screen to stop being black. Load time and Core Web Vitals belong to the inemaSEO course.Not that one
It's a weight, not a time: what has to arrive for the screen to stop being black. Load time and Core Web Vitals belong to the inemaSEO course.Review: Install the kitQuiz 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
MechanicsA clip becomes frames; scrolling picks the frame; the canvas draws.
CostWeight per visitor: computer, phone, and first paint.
DecisionWith a budget in MB, before spending on a generator.