E1 · Tus cuadros
10 minCorre el bloque "tus cuadros en la página y verificar" (necesita la carpeta de cuadros de la lección 2).
Listo cuando: quadros: 144 (frames/), OK: 3 de 3 posições y saída: 0.
Clase 3 · 18 min
Scroll que controla el tiempo: la skill de scroll cinemático
El motor que conecta el scroll con los cuadros tiene pocas piezas, y cada una resuelve un tropiezo medido. Ves las piezas, cambias los cuadros de la página del kit por los tuyos de la clase 2, pruebas con el contrato de prueba que el cuadro correcto aparece en cada punto y le pides la página nueva a la skill scroll-film-studio, de INEMA.
Comenzar la clase
En esta clase vas a
- 1Las piezas del motor: carril (scroll driver), progreso, cabezal suavizado, ventana de bitmaps
- 2El contrato de prueba ?jump=[y] + window.__ready, y por qué sin él no hay verificación
- 3Instalar la skill scroll-film-studio y pedir la página por la Lane A, sin generador
- 4La puerta de texto: la página vende, no narra la cámara
Objetivo: conectar tus cuadros al motor de scroll del kit, probar con el contrato ?jump y __ready y pedir la página a la skill.
01El motor de scroll por dentro
Las piezas de motor-rolagem.js (site-movimento, INEMA). Haz clic en cada una.
Haz clic en cada bloque del diagrama para ver qué hace.
En site-movimento, la corrección de la ventana de bitmaps llevó la traba máxima en el scroll de 150–315 ms a 33–36 ms (README y comentario del motor, 18/10/2026).
02La página del kit con tus cuadros
Copia la página a una carpeta de ensayo, cambia frames/ por los cuadros de la clase 2 y verifica.
Terminal · tus cuadros en la página y verificar
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 $SFragmento · 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 · error común: página sin el contrato
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 $SEjemplo del repositorio
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
El verificador abre la página tres veces con ?jump= al inicio, en medio y al final del carril y lee el cuadro del motor.
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
La copia erro-sem-contrato.html no llama a MotionEngine.ready: la página funciona para quien hace scroll con la mano, pero ningún test sabe cuándo mirar.
03El contrato de prueba
Dos líneas que las dos skills de INEMA piden en toda página que construyen.
1. ?jump=[y]
La página lee el parámetro jump de la URL y hace scroll hasta y píxeles antes que cualquier otra cosa, sin scroll suave. Abrir la página al 50% se vuelve una URL.
El motor del kit hace esto en MotionEngine.ready.
2. __ready
Después de posicionar y dibujar, la página marca window.__ready = true. La prueba espera esa marca en lugar de esperar un tiempo fijo.
Esperar 2 s "para dar tiempo" pasa en tu máquina y falla en una máquina cargada.
3. Lo que te da
Captura de pantalla, verificador y el agente revisando su propio trabajo, todos por el mismo camino.
El verify.js de la skill se niega a capturar la pantalla si __ready nunca llega.
04La skill scroll-film-studio
Skill de INEMA para Codex y Claude Code. Dos rutas: Lane A solo código (sin costo) y Lane B con película de tu generador. El verificar.mjs lee los ganchos del kit (sección [data-filme], canvas #tela, window.__filme, window.__filmeInfo) además del contrato; por eso el prompt parte de kit/site. Una página hecha desde cero por la skill se verifica con su verify.js.
Terminal · bajar la skill y ver lo que trae
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.mdUna vez · instalar en tu agente
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 # Si Codex no encuentra la skill en ~/.codex/skills: usa ~/.agents/skills
Prompt · pedirle la página a la skill (Lane A)
Usa la skill scroll-film-studio en la Lane A (solo código, sin generar video). Producto: <nombre y una frase de lo que es>. Para quién: <quién compra>. La película de apertura usa los cuadros que ya están en frames/ (manifest.json con la cantidad). Texto: solo lo que está en este archivo: <ruta de tu texto>. No inventes números ni testimonios. Reglas fijas: página estática, sin build; parte de kit/site (motor-rolagem.js y site.js) y cambia solo lo visual y el texto, manteniendo la sección [data-filme], el canvas #tela, window.__filme, window.__filmeInfo, el contrato ?jump=<y> + window.__ready y el modo quieto con reducir movimiento. Listo cuando: node ~/projetos/formacao-cinema-ia-sites-v72/kit/scripts/verificar.mjs <url> responde OK: 3 de 3 posições.
Ejemplo del repositorio
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
La skill fue escrita en jul/2026 y cita generadores por el nombre de aquella época para la Lane B. Qué generador usar hoy es tema del curso 1; aquí basta la Lane A.
05La puerta de texto de la skill
El texto sobre la película vende el producto. Si narra la cámara ("la cámara avanza") o manda a hacer scroll, es guion de rodaje filtrándose a la página. El copy-gate.js lo reprueba.
Terminal · texto limpio y texto que narra la cámara
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]}"Ejemplo del repositorio
✓ ~/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: 1El copy-gate.js lee inglés. Para páginas en portugués y español, site-movimento tiene una puerta de texto equivalente, que corres en la lección 6.
06Práctica
Tus cuadros en la página, el contrato probado y la skill instalada.
E2 · Sin contrato
5 minCorre el verificador contra erro-sem-contrato.html (bloque "error común: página sin el contrato") y después abre kit/site/site.js y encuentra la línea que llama a MotionEngine.ready.
Listo cuando: FALHA: a página não marcou window.__ready em 15 s con saída: 1.
E3 · La skill
15 minCorre "bajar la skill" e instálala en tu agente. Corre la puerta de texto. Opcional: pide la página con el prompt de la Lane A usando tu producto, en una carpeta nueva.
Listo cuando: ls ~/.claude/skills/scroll-film-studio/SKILL.md (o ~/.codex/skills/…) muestra el archivo, y el bloque de la puerta de texto muestra copy clean y después saída: 1.
07Prueba de la clase
La explicación aparece después de tu respuesta.
Pregunta 1 de 4
El scroll se traba cuando haces scroll rápido por primera vez. ¿Qué pieza del motor resuelve eso?
Correcto
El tirón es la decodificación del JPEG en el momento de dibujar. La ventana decodifica antes, fuera del hilo principal. Precargar todo pesa y no evita la decodificación; densidad 2 duplica el trabajo.No es esa
El tirón es la decodificación del JPEG en el momento de dibujar. La ventana decodifica antes, fuera del hilo principal. Precargar todo pesa y no evita la decodificación; densidad 2 duplica el trabajo.Repasar: El motor de scroll por dentroPregunta 2 de 4
¿Por qué el verificador espera window.__ready en lugar de esperar 2 segundos?
Correcto
Un tiempo fijo es una apuesta: en una máquina cargada el dibujo se atrasa y la prueba lee la pantalla negra. La marca __ready dice exactamente cuándo mirar.No es esa
Un tiempo fijo es una apuesta: en una máquina cargada el dibujo se atrasa y la prueba lee la pantalla negra. La marca __ready dice exactamente cuándo mirar.Repasar: El contrato de pruebaPregunta 3 de 4
¿Cuál de estas frases reprueba la puerta de texto sobre la película de un lente?
Correcto
Narrar la cámara es guion de filmación, no texto para quien compra. La persona ya está viendo la película; el texto dice lo que la imagen no dice.No es esa
Narrar la cámara es guion de filmación, no texto para quien compra. La persona ya está viendo la película; el texto dice lo que la imagen no dice.Repasar: La página del kit con tus cuadrosPregunta 4 de 4
En la skill scroll-film-studio, ¿qué cambia entre la Lane A y la Lane B?
Correcto
Lane A: movimiento en código, costo cero. Lane B: película generada en clips encadenados, con la cuenta y los créditos de tu generador.No es esa
Lane A: movimiento en código, costo cero. Lane B: película generada en clips encadenados, con la cuenta y los créditos de tu generador.Repasar: La página del kit con tus cuadrosPrueba terminada
Acertaste {a} de {n}. Si aciertas todas, la clase se marca como completada.Elige una alternativa. La explicación aparece después de tu intento.
08En tres frases
MotorCarril (scroll driver), progreso, cabezal suavizado, ventana de bitmaps, carga 1 de cada 8.
Contrato?jump=[y] posiciona, window.__ready avisa: sin él no hay prueba.
Skillscroll-film-studio por la Lane A, con puerta de texto.