E1 · Your frames
10 minRun the "your frames on the page and verify" block (you need the frames folder from lesson 2).
Done when: quadros: 144 (frames/), OK: 3 de 3 posições and saída: 0.
Lesson 3 · 18 min
Scroll that controls time: the cinematic scroll skill
The engine that ties scrolling to frames has few parts, and each one fixes a measured stutter. You look at the parts, swap the kit page's frames for your own from lesson 2, prove with the test contract that the right frame shows up at each point, and ask the scroll-film-studio skill, from INEMA, for the new page.
Start the lesson
In this lesson you will
- 1The engine parts: track, progress, smoothed playhead, bitmap window
- 2The test contract ?jump=[y] + window.__ready, and why without it there is no verification
- 3Install the scroll-film-studio skill and ask for the page through Lane A, with no generator
- 4The copy gate: the page sells, it doesn't narrate the camera
Goal: tie your frames to the kit's scroll engine, prove it with the ?jump and __ready contract, and ask the skill for the page.
01The scroll engine inside
The parts of motor-rolagem.js (site-movimento, INEMA). Click each one.
Click each block in the diagram to see what it does.
In site-movimento, the bitmap window fix took the worst scroll hitch from 150–315 ms down to 33–36 ms (README and engine comment, 10/18/2026).
02The kit page with your frames
Copy the page to a rehearsal folder, swap frames/ for the frames from lesson 2, and verify.
Terminal · your frames on the page and verify
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 $SExcerpt · 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 · common mistake: page without the contract
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 $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 verifier opens the page three times with ?jump= at the start, middle, and end of the track and reads the engine's frame.
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
The copy erro-sem-contrato.html never calls MotionEngine.ready: the page works for someone scrolling by hand, but no test knows when to look.
03The test contract
Two lines that both INEMA skills require on every page they build.
1. ?jump=[y]
The page reads the jump parameter from the URL and scrolls to y pixels before anything else, with no smooth scrolling. Opening the page at 50% becomes a URL.
The kit's engine does this in MotionEngine.ready.
2. __ready
After positioning and drawing, the page sets window.__ready = true. The test waits for that flag instead of waiting a fixed time.
Waiting 2 s "to be safe" passes on your machine and fails on a loaded one.
3. What you get
Screenshot, verifier, and the agent checking its own work, all through the same path.
The skill's verify.js refuses to capture the screen if __ready never arrives.
04The scroll-film-studio skill
INEMA skill for Codex and Claude Code: interview, concepts, art direction, page, and gates. Two lanes: Lane A code only (no cost) and Lane B with film from your generator. The kit's verificar.mjs reads the kit's hooks ([data-filme] section, #tela canvas, window.__filme, and window.__filmeInfo) in addition to the contract; that's why the prompt tells the skill to start from kit/site. A page built from scratch by the skill checks out with its own verify.js.
Terminal · download the skill and see what it brings
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.mdOnce · install in your agent
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 that can't find the skill in ~/.codex/skills: use ~/.agents/skills
Prompt · ask the skill for the page (Lane A)
Use the scroll-film-studio skill in Lane A (code only, no video generation). Product: <name and one sentence about what it is>. For whom: <who buys>. The opening film uses the frames already in frames/ (manifest.json with the count). Copy: only what is in this file: <path to your text>. Don't invent numbers or testimonials. Fixed rules: static page, no build; start from kit/site (motor-rolagem.js and site.js) and change only the look and the text, keeping the [data-filme] section, the #tela canvas, window.__filme, window.__filmeInfo, the ?jump=<y> + window.__ready contract, and the still mode with reduced motion. Done when: node ~/projetos/formacao-cinema-ia-sites-v72/kit/scripts/verificar.mjs <url> answers OK: 3 de 3 posições.
Example from the repository
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
The skill was written in Jul/2026 and cites generators by the names from that time for Lane B. Which generator to use today is a topic for course 1; here Lane A is enough.
05The skill's copy gate
The text over the film sells the product. If it narrates the camera ("the camera pushes in") or tells people to scroll, it's shooting script leaking onto the page. copy-gate.js fails it.
Terminal · clean copy and copy that narrates the camera
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]}"Example from the repository
✓ ~/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: 1copy-gate.js reads English. For pages in Portuguese and Spanish, site-movimento has an equivalent copy gate, which you run in lesson 6.
06Practice
Your frames on the page, the contract proven, and the skill installed.
E2 · No contract
5 minRun the verifier against erro-sem-contrato.html (the "common mistake: page without the contract" block) and then open kit/site/site.js and find the line that calls MotionEngine.ready.
Done when: FALHA: a página não marcou window.__ready em 15 s with saída: 1.
E3 · The skill
15 minRun "baixar a skill" and install it in your agent. Run the copy gate. Optional: ask for the page with the Lane A prompt, using your product, in a new folder.
Done when: ls ~/.claude/skills/scroll-film-studio/SKILL.md (or ~/.codex/skills/…) shows the file, and the copy gate block shows copy clean and then saída: 1.
07Lesson quiz
The explanation appears after you answer.
Question 1 of 4
Scrolling stutters the first time you scroll fast. Which part of the engine fixes this?
Correct
The stutter is JPEG decoding at draw time. The window decodes ahead, off the main thread. Preloading everything is heavy and does not avoid decoding; density 2 doubles the work.Not that one
The stutter is JPEG decoding at draw time. The window decodes ahead, off the main thread. Preloading everything is heavy and does not avoid decoding; density 2 doubles the work.Review: The scroll engine insideQuestion 2 of 4
Why does the checker wait for window.__ready instead of waiting 2 seconds?
Correct
A fixed time is a guess: on a loaded machine the drawing is late and the test reads a black screen. The __ready flag says exactly when to look.Not that one
A fixed time is a guess: on a loaded machine the drawing is late and the test reads a black screen. The __ready flag says exactly when to look.Review: The test contractQuestion 3 of 4
Which of these sentences does the copy gate reject for a lens film?
Correct
Narrating the camera is shooting script, not copy for a buyer. The person is already watching the film; the text says what the image does not.Not that one
Narrating the camera is shooting script, not copy for a buyer. The person is already watching the film; the text says what the image does not.Review: The kit page with your framesQuestion 4 of 4
In the scroll-film-studio skill, what changes between Lane A and Lane B?
Correct
Lane A: motion in code, zero cost. Lane B: a film generated as chained clips, with the bill and credits of your generator.Not that one
Lane A: motion in code, zero cost. Lane B: a film generated as chained clips, with the bill and credits of your generator.Review: The kit page with your framesQuiz 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
EngineTrack, progress, smoothed playhead, bitmap window, 1 in 8 load.
Contract?jump=[y] positions, window.__ready signals: without it there is no test.
Skillscroll-film-studio through Lane A, with a copy gate.