Transcribe, corta silencios y errores, planifica las escenas y arma motion graphics en HTML animado. Describes lo que quieres, en lenguaje natural, y el agente verifica su propio trabajo antes de entregar.
Quince skills espejadas para Codex y Claude Code, 406 cards de motion graphics en dos estilos, dos plantillas de escena, validadores y un starter que funciona sin clave de API.
Elimina silencios, tartamudeos, falsos comienzos y retomas con marcas de tiempo por palabra. Cada corte propuesto se revisa en contexto antes de aplicarlo.
Cards con tokens CSS y slots de texto, anclados en la frase exacta del habla. Un validador comprueba que cada elemento entre en el momento en que hablas de él.
Edición completa de clases, reels y Shorts 9:16, y showreels de marca de 15 segundos cortados al ritmo de la música.
Es el razonamiento detrás del kit. Cada etapa tiene una skill o un script. El detalle está en docs/METODO.md (en portugués).
Tiempo por palabra: es lo que hace que cada gráfico entre en el momento justo y que el agente entienda la historia. ElevenLabs Scribe o Whisper local.
El aire muerto y los errores salen antes de cualquier diseño, con cut-silences y luego cut-mistakes. Sirve incluso si vas a terminar en tu editor.
"Cuando diga X, muestra Y." Cuanto más claro sea el acuerdo, más cerca de lo que quieres. video-storytelling y hyperframes-video-beats.
Todo lo que repites se convierte en skill. En cada ronda, di lo que te gustó y lo que no, y pide que actualice la skill.
El agente renderiza, extrae cuadros, revisa, corrige y solo entrega después de algunas vueltas. Recibes la versión 5, no la 1.
¿Te gustó un video? Mídelo con analyze-reference.mjs, pide el análisis de por qué funciona y conviértelo en skill. Así nació motion-showreel.
Describe el resultado e incluso la emoción que el video debe provocar. El agente agrega ideas propias; revisa como lo harías con un editor. Todas las recetas están en docs/PROMPTS.md (en portugués).
Cada elemento atado a una frase, con posición y card de vidrio para dar legibilidad.
Cuando mencione [A] y [B], muestra [A] donde
señalo a la izquierda y [B] a la derecha, con los
logos animados y un card de vidrio detrás. Cuando
diga "[tesis]", muestra las palabras abajo,
destacadas. Verifica el render antes de entregar.El agente busca el material: graba la pantalla, toma capturas, usa imágenes reales y genera lo que falte.
Cuando hable de B-roll, capturas de pantalla o
generación de imágenes, hazlo de verdad: graba la
pantalla, toma la captura, genera la imagen y
muéstralo a los lados con un fondo que garantice
la legibilidad.Pizarra blanca dibujada a mano; estilo curso con cámara en círculo y tópicos grandes; o short dinámico con B-roll.
Edita [grabación] como clase. La cámara empieza
en pantalla completa y luego queda en un recorte
circular. Fondo minimalista, pocos tópicos grandes
e imágenes simples generadas por IA.Una carpeta de grabaciones de un evento se convierte en un reel con las frases que muestran la energía del público.
Revisa todo en [carpeta], transcribe las frases y
arma un sizzle de [duración] contando la historia
del evento. Muéstrame la selección de frases antes.Imágenes reales del catálogo, fotos generadas a partir de ellas y videos cortos de esas fotos, al ritmo de la música.
Haz un video de [duración] para [producto] con
imágenes reales del catálogo. Donde falte
movimiento, genera foto y video (Kling con mi
suscripción). Confirma antes de gastar créditos.La skill motion-showreel: un motivo que se transforma en capítulos, HUD, cortes en la grilla de tiempos y lockup del logo.
Usa motion-showreel para un showreel de 15 s
de [marca]. Mide la grilla de tiempos, mapea los
capítulos a objetos de la marca y muéstrame el
storyboard antes de construir.Node.js 22+, Git, FFmpeg con ffprobe y Chrome o Chromium. El starter y las pruebas no necesitan ninguna clave de pago.
Comprueba que estén en el PATH de la terminal.
# versiones node -v # 22 o superior ffmpeg -version ffprobe -version
Codex (app de escritorio o CLI) o Claude Code. Las skills se descubren solas al abrir la carpeta. Para ediciones completas, usa esfuerzo alto.
# Claude Code, dentro de la carpeta claude # Codex: New project → Local → carpeta del kit
Transcripción: ElevenLabs Scribe o Whisper local. Video generado: tu suscripción Kling mediante la CLI kling; Kie.ai solo como alternativa de pago.
# .env en la raíz ELEVENLABS_API_KEY=tu-clave # Kling: sin clave, login OAuth kling login
Los comandos de abajo son los del repositorio. En Codex usa $skill; en Claude Code, /skill.
Clona, instala las dependencias fijas (HyperFrames 0.7.109 y GSAP 3.14.2), comprueba las herramientas y ejecuta las pruebas.
git clone https://github.com/inematds/hyperframes-student-kit.git cd hyperframes-student-kit npm ci npm run setup # revisa node, ffmpeg, chrome y crea el .env npm test # pruebas sin clave de API
Crea un proyecto con la composición sintética, abre el Studio para hacer scrub y renderiza un MP4 de ocho segundos.
npm run demo cd video-projects/demo npx hyperframes lint npx hyperframes preview # Studio en localhost; Ctrl+C para salir npx hyperframes render --quality draft --output renders/demo.mp4
En ElevenLabs: Developers → API keys → crea una clave restringida a speech_to_text y pégala en el .env. Si prefieres Whisper local, díselo al asistente y él lo configura.
# transcripción con marcas de tiempo por palabra, junto al video node scripts/transcribe-elevenlabs.mjs video-projects/meu-video/assets/raw.mp4
Crea el proyecto, coloca la grabación en assets/raw.mp4 y di qué aparece en cada frase. Cuanto más específico, más cerca de lo que imaginas.
npm run new-video -- meu-video # en el asistente: Usa edit-video en video-projects/meu-video/assets/raw.mp4. Corta pausas y errores y muéstrame los cortes de errores. Cuando diga "[frase]", muestra [elemento] a la derecha con un card de vidrio detrás. Estilo papel cuadriculado oscuro. Verifica antes de entregar.
Primero los silencios, luego la revisión de errores usando el video ya cortado y la transcripción re-temporizada. Nunca mezcles los tiempos originales con el video editado.
node .claude/skills/cut-silences/scripts/cut-silences.mjs assets/raw.json --video assets/raw.mp4 --out-dir assets --output assets/silenced.mp4 --apply node .claude/skills/cut-mistakes/scripts/find-cut-candidates.mjs assets/raw.silence-transcript.json --out-dir assets # revisa, escribe approved-cuts.json y luego: node .claude/skills/cut-mistakes/scripts/apply-cuts.mjs assets/raw.silence-transcript.json --cuts assets/approved-cuts.json --video assets/silenced.mp4 --out-dir assets --output assets/clean.mp4 --apply
El flujo short-form planifica gancho y recompensa, subtítulos exactos y B-roll, y tiene validadores de plan y de footage.
Usa short-form-edit para convertir video-projects/meu-reel/assets/raw.mp4 en un reel 9:16. Gancho verdadero, subtítulos precisos, B-roll con propósito y diseño de sonido. Prepara un draft. npm run validate:short-form -- video-projects/meu-reel npm run validate:footage -- video-projects/meu-reel
Mide la grilla de tiempos de la música (tuya o gratuita), genera la hoja de cuadros y deja que la skill arme los capítulos. Los scripts de audio son locales, solo FFmpeg.
node .claude/skills/motion-showreel/scripts/music-grid.mjs assets/audio/musica.mp3 --bpm 128 --beats node .claude/skills/motion-showreel/scripts/beatgrid.mjs --period 0.4644 --length 15 --chapters "01 Physics:4, 02 Type:8, Flurry:4, 07 End:rest" node .claude/skills/motion-showreel/scripts/mix.mjs --bed music-bed.wav --events events.json --out master.wav
Ejecuta preflight y lint, revisa en el Studio, renderiza el draft y míralo. Devuelve feedback concreto. Cuando te guste un resultado, o un video de otra persona, pide que se convierta en skill y sincroniza el espejo de Codex.
node scripts/preflight.mjs video-projects/meu-video node scripts/validate-beat-sync.mjs video-projects/meu-video node .claude/skills/motion-showreel/scripts/analyze-reference.mjs referencia.mp4 qa/ref --fps 6 --bpm 128 npm run sync:skills # después de editar .claude/skills/
Referencias de encuadre y de la propuesta. Las fotos de presentador del repositorio son simuladas; trae tu propia grabación para los ejercicios.
docs/ (en portugués).El kit reúne el pipeline de edición, las skills del original y el método del tutorial. Los próximos pasos son ejemplos y estilos en portugués.
docs/METODO.md y docs/PROMPTS.md (en portugués).