E1 · Cinco fotogramas y costura
5 minEjecuta el bloque "check, cinco quadros e costura" y abre quadros/contact-sheet.jpg.
Listo cuando: ◇ Check passed, 5 quadros em quadros/, COSTURA: igual (quadro inicial = quadro final) y saída: 0.
Clase 3 · 15 min
Pedirle al agente: el método RISE y la prueba en cinco fotogramas
Un pedido vago genera una animación genérica y diez rondas de corrección. RISE organiza el pedido en cuatro partes: Referencias, Idea, Estilo y Examinar. La última es la que más te salva: el agente revisa cinco fotogramas y corrige antes de que renderices. En esta clase escribes el pedido y verificas la respuesta con un comando.
Empezar la clase
En esta clase vas a
- 1Las cuatro partes del pedido y qué va en cada una
- 2El snapshot: cinco fotogramas en segundos, sin renderizar el video
- 3La costura del loop verificada por píxel
- 4Las 10 fallas de una animación amateur, para buscar en los fotogramas
Objetivo: escribir un pedido RISE para tu agente y verificar el resultado en cinco fotogramas antes de renderizar.
01Las cuatro partes del pedido
Haz clic en cada letra.
Haz clic en cada bloque del diagrama para ver qué hace.
Método RISE del curso motion-rise de INEMA, adaptado a HyperFrames: la E usa check y snapshot en lugar de un canvas propio.
02El pedido listo
Un loop de 6 s sobre una línea de tiempo de edición. Cópialo a la carpeta del proyecto y pégalo en el agente (Claude Code o Codex, con el mejor modelo de tu suscripción).
Archivo · kit/prompts/rise-loop.md
R — REFERENCIAS Lee el DESIGN.md de esta carpeta antes que nada: los colores, las fuentes y las reglas de movimiento salen de ahí. No inventes logotipo, color ni fuente. Proyecto HyperFrames 0.8.176 en esta carpeta (index.html ya creado por el init). I — IDEA Un loop de 6 segundos, 1920x1080, sobre una línea de tiempo de edición. - Inicio (0–0,6 s): el riel de la línea de tiempo y el cabezal de reproducción quietos a la izquierda. - Medio (0,6–4,2 s): el cabezal corre hasta la derecha; el título "Cena 1" entra y sale. - Final (4,2–6 s): el cabezal vuelve a la izquierda y se detiene. El último fotograma es igual al primero. S — ESTILO Visual: fondo #0c0c10 con luz suave en el centro, riel #3f3f47, cabezal #e9b949 (el único color de acento), título blanco #f4f4f5 en sans serif del sistema, peso 700. Movimiento: nada a velocidad constante (power1 a power3, entrada y salida suaves); el título queda legible al menos 1,2 s; una sola cosa se mueve a la vez. E — EXAMINAR Escribe todo en una única timeline GSAP pausada registrada en window.__timelines["main"], sin Math.random y sin Date.now. Ejecuta `npx hyperframes@0.8.176 check` y corrige hasta que aparezca "Check passed". Saca 5 fotogramas con `npx hyperframes@0.8.176 snapshot --at 0,1.5,3,4.5,5.9 --no-end -o quadros`, mira el contact-sheet.jpg y verifica: el fotograma de 0 s es igual al de 5,9 s; ninguna letra cortada; ninguna palabra sola en la línea; el título aparece completo en el fotograma de 3 s. Corrige lo que falle y repite hasta que todo pase. No renderices el MP4: yo renderizo después de ver los fotogramas.
En el agente · dentro de la carpeta del proyecto
Lee rise-loop.md y haz exactamente lo que pide. Al final, dime el resultado del check y qué corregiste después de mirar los 5 fotogramas.
03La E en tus manos: cinco fotogramas y la costura
La carpeta kit/exemplos/a3-loop tiene una composición hecha a partir de este pedido. El ensayo ejecuta el check, saca cinco fotogramas y compara el primero con el último.
Terminal · check, cinco fotogramas y costura
K=~/projetos/formacao-cinema-ia-motion-v72/kit
export HYPERFRAMES_NO_TELEMETRY=1 NO_COLOR=1
unset GEMINI_API_KEY # sin esto, el snapshot envía los fotogramas a Gemini por su cuenta
E=${TMPDIR:-/tmp}/ensaio-motion/a3; rm -rf "$E"; mkdir -p "$E"
cp -r "$K/exemplos/a3-loop" "$E/loop"; cd "$E/loop"
npx -y hyperframes@0.8.176 check 2>&1 | grep -E "Check passed|✗"
npx -y hyperframes@0.8.176 snapshot --at 0,1.5,3,4.5,5.9 --no-end -o quadros > snapshot.log 2>&1
bash "$K/costura.sh" quadros; echo "saída: $?"Terminal · el error: quitar la vuelta del cabezal de reproducción
K=~/projetos/formacao-cinema-ia-motion-v72/kit
export HYPERFRAMES_NO_TELEMETRY=1 NO_COLOR=1
unset GEMINI_API_KEY
cd ${TMPDIR:-/tmp}/ensaio-motion/a3/loop
sed -i '/x: 0, duration: 1.2/d' index.html # quita la vuelta del cabezal de reproducción
npx -y hyperframes@0.8.176 snapshot --at 0,1.5,3,4.5,5.9 --no-end -o quadros > snapshot.log 2>&1
bash "$K/costura.sh" quadros; echo "saída: $?"Ejemplo del repositorio
◇ Check passed 5 quadros em quadros/ COSTURA: igual (quadro inicial = quadro final) saída: 0
Los fotogramas quedan en quadros/ (frame-00-at-0s.png hasta frame-04-at-5.9s.png) con un contact-sheet.jpg, la cuadrícula que tú y el agente miran.
5 quadros em quadros/ COSTURA: diferente — o último quadro não volta ao primeiro saída: 1
Sin el último movimiento, el cabezal termina a la derecha y el loop da un salto. El comando detecta la falla antes de cualquier render.
En la 0.8.176, el snapshot tiene la opción --describe, que envía los fotogramas a análisis de Gemini y se ejecuta sola cuando existe GEMINI_API_KEY en el entorno (texto de snapshot --help). Los bloques hacen unset GEMINI_API_KEY para que nada salga de tu máquina.
04Qué mirar en los cinco fotogramas
Las 10 fallas de motion-rise, en cuatro grupos. Pega la lista al final del pedido o revísalas tú mismo en el contact-sheet.
1. Texto
Letra cortada (altura de línea 1,1 o más; revisa g, j, p, q, y).
Palabra sola en la última línea: reescribe o une las dos últimas palabras con un espacio que no se rompe.
Todo texto queda quieto al menos 1,2 s.
2. Escenario
El visual ocupa entre el 80% y el 95% del fotograma.
La luz cae a lo largo del fotograma: nada de color plano.
Una idea sobre un fondo calmo.
3. Movimiento
Nada a velocidad constante: entrada y salida suaves.
En loop, el último fotograma igual al primero (costura.sh lo verifica).
4. Marca
Logo solo desde el archivo, nunca dibujado de memoria.
Textura sutil para que no parezca plástico.
05Práctica
El ensayo, el error y tu agente.
E2 · Ver cómo se abre la costura
5 minEjecuta el bloque del error, que borra la vuelta del cabezal de lectura.
Listo cuando: COSTURA: diferente — o último quadro não volta ao primeiro y saída: 1.
E3 · Tu agente hace el loop
20 minEn un proyecto nuevo (npx hyperframes@0.8.176 init meu-loop --non-interactive), copia kit/prompts/rise-loop.md y kit/exemplos/a4-marca/DESIGN.md a la carpeta y envía el pedido a tu agente. (El DESIGN.md viene listo; la clase 4 explica cada sección). Después corre tú mismo el check y el snapshot del bloque.
Listo cuando: En la carpeta meu-loop: npx hyperframes@0.8.176 check termina en Check passed y bash ~/projetos/formacao-cinema-ia-motion-v72/kit/costura.sh quadros; echo "saída: $?" → COSTURA: igual y saída: 0.
06Prueba de la clase
La explicación aparece después de tu respuesta.
Pregunta 1 de 4
¿Qué parte de RISE le dice al agente cómo probar que terminó?
Correcto
La E trae la compuerta (check), los fotogramas que hay que sacar, qué revisar en cada uno y el orden de corregir y repetir. Sin ella, el agente declara listo en el primer archivo que corre.No es esa
La E trae la compuerta (check), los fotogramas que hay que sacar, qué revisar en cada uno y el orden de corregir y repetir. Sin ella, el agente declara listo en el primer archivo que corre.Repasar: Las cuatro partes del pedidoPregunta 2 de 4
¿Por qué el pedido termina con "no renderices el MP4"?
Correcto
Cinco fotogramas salen en segundos; el render completo tarda minutos y ocupa la máquina. Mirar antes evita renderizar mal. El render local no gasta crédito de ninguna plataforma.No es esa
Cinco fotogramas salen en segundos; el render completo tarda minutos y ocupa la máquina. Mirar antes evita renderizar mal. El render local no gasta crédito de ninguna plataforma.Repasar: El pedido listoPregunta 3 de 4
costura.sh dijo "diferente". ¿Qué le pides al agente?
Correcto
Corrección específica, con el criterio incluido: qué tiene que cambiar y cómo se verifica. "Mejora el loop" genera otra ronda a ciegas.No es esa
Corrección específica, con el criterio incluido: qué tiene que cambiar y cómo se verifica. "Mejora el loop" genera otra ronda a ciegas.Repasar: PrácticaPregunta 4 de 4
¿Dónde entran los colores y la fuente en el pedido?
Correcto
El Estilo describe apariencia y movimiento; la R apunta al archivo que manda (el DESIGN.md de la clase 4). Así el agente no inventa colores.No es esa
El Estilo describe apariencia y movimiento; la R apunta al archivo que manda (el DESIGN.md de la clase 4). Así el agente no inventa colores.Repasar: Las cuatro partes del pedidoPrueba 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.
07En tres frases
RISEReferencias, Idea, Estilo y Examinar, en ese orden, en un archivo que se queda en la carpeta.
Cinco fotogramasEl snapshot muestra el video en segundos; costura.sh verifica el loop por píxel.
Corrección específicaQué cambiar y cómo verificarlo, nunca "mejora".