E1 · Gate on the rehearsal
10 minRun "build the page and pass the gate".
Done when: PORTÃO: 4/4 OK and saída: 0.
Lesson 8 · 20 min
Your site: a product page with cinematic scroll, published
Time to put it all together on a page of your own. You start from the kit's template, swap the photo and the text for those of your product, redo the two films, pass the four-check gate and publish to GitHub Pages. The same checker that ran on your machine runs against the public URL: it is what says you are live.
Start the lesson
In this lesson you will
- 1The kit template as a starting point, with your photo and your text
- 2The 4/4 gate: weight, computer, phone, and reduced motion
- 3Publish on GitHub Pages and check the public URL
- 4Your plan with dates and the map of the whole program
Goal: build your page from the kit's template, pass gate 4 of 4 and publish to GitHub Pages.
01The map of your page
The four deliverables the page brings together. Click a step to see the "done when".
At the end of the courseA product page of your own, with a scroll film, published and checked at the public URL.
8 lessonsClick an exercise to see what to do and the "done when".
- 1/4
Frames
Clip of your product (generator or rehearsal with clipe.sh) and frames at the native rate, checked by conferir-quadros.py.
- 2/4
Scroll
The frames in the kit engine, with the ?jump and __ready contract. If you asked the skill for the page from kit/site, the same checker verifies it.
- 3/4
Film
If your film has more than one clip, chain them and run the site-movimento gates before assembling.
- 4/4
Mobile
Vertical film within budget and the page still for anyone who asked for less motion.
Lessons 1, 4, and 5 come in when the page asks for them: the weight decision, a Three.js scene, and the brand film.
02From the template to your page, with the gate
The rehearsal swaps the front-facing lens for the lens lying down; in yours, swap in your product photo and rewrite the texts in index.html.
Terminal · build the page and pass the gate
K=~/projetos/formacao-cinema-ia-sites-v72/kit
E=${TMPDIR:-/tmp}/ensaio-sites/a8; rm -rf "$E"; mkdir -p "$E"
# your site starts as a copy of the template; swap the product photo for yours (here: the lens lying down)
cp -r "$K/site" "$E/meu-site"; rm -f "$E/meu-site"/erro-*.html
bash "$K/scripts/clipe.sh" "$K/exemplos/lente2.jpg" "$E/h.mp4" 6 1.0 1.3
bash "$K/scripts/clipe.sh" "$K/exemplos/lente2.jpg" "$E/v.mp4" 6 1.0 1.3 1080x1920
bash "$K/scripts/quadros.sh" "$E/h.mp4" "$E/meu-site/frames" 1024 6
bash "$K/scripts/quadros.sh" "$E/v.mp4" "$E/meu-site/frames-v" 600 8
bash "$K/scripts/portao.sh" "$E/meu-site"; echo "saída: $?"File · kit/scripts/portao.sh
#!/usr/bin/env bash
# portao.sh — o portão final da página: 4 conferências, uma por vez, sem modelo e sem serviço pago.
# 1. peso visitante mais pesado ≤ ORCAMENTO MB (padrão 6) e primeira pintura ≤ 0,5 MB
# 2. computador 1366×768: rolagem em 0 %, 50 % e 100 % com o quadro certo e tela pintada
# 3. celular 390×844 em pé: filme vertical (frames-v/), sem transbordo
# 4. reduzir com "reduzir movimento": o filme fica parado
# Uso: bash portao.sh <pasta-do-site> (ORCAMENTO=8 bash portao.sh … muda o teto)
set -uo pipefail
K=$(cd "$(dirname "$0")/.." && pwd)
SITE=$(cd "$1" && pwd)
T=$(mktemp -d); trap 'kill $S 2>/dev/null; rm -rf "$T"' EXIT
node "$K/scripts/servir.mjs" "$SITE" > "$T/url" & S=$!
until U=$(cat "$T/url" 2>/dev/null) && [ -n "$U" ] && curl -s -o /dev/null "$U"; do sleep 0.3; done
ok=0
python3 "$K/scripts/peso.py" "$SITE" --orcamento "${ORCAMENTO:-6}" --inicial 0.5 > "$T/1" && ok=$((ok+1)) && echo "1 peso: OK" || { echo "1 peso: FALHA"; grep -E "ACIMA" "$T/1"; }
for n in "2 computador:" "3 celular:--celular" "4 reduzir:--reduzir"; do
rot=${n%%:*}; op=${n#*:}
node "$K/scripts/verificar.mjs" "$U" $op > "$T/v" && ok=$((ok+1)) && echo "$rot: OK" || { echo "$rot: FALHA"; grep "^FALHA" "$T/v"; }
done
echo "PORTÃO: $ok/4 $([ $ok -eq 4 ] && echo OK || echo FALHOU)"
[ $ok -eq 4 ]Example from the repository
h.mp4: 6,0 s · 24 fps · 1920×1080 v.mp4: 6,0 s · 24 fps · 1080×1920 QUADROS: 144 · 1024×576 · 2,2 MB · 24 fps QUADROS: 144 · 600×1066 · 3,5 MB · 24 fps 1 peso: OK 2 computador: OK 3 celular: OK 4 reduzir: OK PORTÃO: 4/4 OK saída: 0
The gate runs the four checks one at a time and exits with 0 only if all four pass.
03Publish and check it live
A public repository with the page at the root, GitHub Pages on the main branch. Then, the checker against the public URL.
Once · publish the folder on GitHub Pages
cd <your-site-folder> git init -b main && git add . && git commit -m "my page with a scroll film" gh repo create <your-user>/<repo-name> --public --source . --push gh api -X POST repos/<your-user>/<repo-name>/pages -f 'source[branch]=main' -f 'source[path]=/'
Terminal · check a published page
K=~/projetos/formacao-cinema-ia-sites-v72/kit
curl -s -o /dev/null -w "%{http_code}\n" https://inematds.github.io/formacao-cinema-ia-sites-v72/kit/site/
node "$K/scripts/verificar.mjs" https://inematds.github.io/formacao-cinema-ia-sites-v72/kit/site/; echo "saída: $?"Example from the repository
200 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
This is the kit page published along with the course. Run the same block with your page's URL, which usually ends up at https://[seu-usuario].github.io/[nome-do-repo]/ a few minutes after the push.
04Practice
Your page, from the template to live.
E2 · Your page
60 minCopy kit/site to a folder of your own, delete the erro-*.html copies, swap the photo (clipe.sh in both formats), redo the frames, rewrite the index.html text using only facts about your product, and run the lesson 6 copy gate and portao.sh.
Done when: The copy gate answers texto limpo and portao.sh answers PORTÃO: 4/4 OK with saída: 0.
E3 · Live
15 minPublish using the "publicar a pasta no GitHub Pages" block and run the checker with your URL.
Done when: curl -s -o /dev/null -w "%{http_code}" [your URL] answers 200 and the checker answers OK: 3 de 3 posições with saída: 0.
05Generate your plan with dates
Pick a start date and how much time you have per week.
plano.md
06Lesson quiz
The explanation appears after you answer.
Question 1 of 4
portao.sh returned "PORTÃO: 3/4 FALHOU" with "1 peso: FALHA". What do you do first?
Correct
The gate tells you which check failed, and the line ABOVE tells you what is heavy. Raising the limit hides the problem; deleting the vertical makes the phone worse.Not that one
The gate tells you which check failed, and the line ABOVE tells you what is heavy. Raising the limit hides the problem; deleting the vertical makes the phone worse.Review: From the template to your page, with the gateQuestion 2 of 4
Why run the checker against the public URL too?
Correct
A frame with the wrong name on the server, a folder that did not upload, an absolute path: all of that passes locally and breaks live. The same checker, a different URL.Not that one
A frame with the wrong name on the server, a folder that did not upload, an absolute path: all of that passes locally and breaks live. The same checker, a different URL.Review: From the template to your page, with the gateQuestion 3 of 4
What text goes in your page's index.html?
Correct
The copy gate rejects camera scripts; an invented testimonial and a number without a source do not go anywhere. The text sells with what is true.Not that one
The copy gate rejects camera scripts; an invented testimonial and a number without a source do not go anywhere. The text sells with what is true.Review: PracticeQuestion 4 of 4
Which of these is NOT one of the four checks in portao.sh?
Correct
The four are weight, desktop, mobile, and reduced motion. Core Web Vitals belongs to the inemaSEO Formation.Not that one
The four are weight, desktop, mobile, and reduced motion. Core Web Vitals belongs to the inemaSEO Formation.Review: From the template to your page, with the gateQuiz 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.
07In three sentences
TemplateStart from the kit; swap the photo, frames, and copy.
GateWeight, desktop, mobile, and reduced motion: 4/4 before you publish.
LiveGitHub Pages and the same checker on the public URL.
End of the Cinema with AI Formation: the 6 courses
Course 0 · Direction: think like a director before you generateCourse 1 · Generation: image and video with AI in Oct 2026Course 2 · Production: from script to finished filmCourse 3 · Motion by code with an agentCourse 4 · The video factory with agentsCourse 5 · Cinematic sites (this course)INEMA Videos area