Communitygithub.com

tornix-demo-video

Convierte grabaciones de pantalla sin editar en un video tutorial de producto con marca, zoom y transiciones suaves, listo para WhatsApp.

¿Qué es tornix-demo-video?

Este skill transforma un conjunto de grabaciones de pantalla (macOS, Chrome, audio en árabe) en un video demo profesional con marca: miniatura animada, marco morado con título y chips de paso, zooms en momentos clave, transiciones silenciosas que nunca cortan una palabra, y un outro animado. Genera además una copia optimizada para WhatsApp a 720p. Es ideal cuando el usuario envía archivos .mov y pide unirlos, agregar una imagen al inicio, mejorar la calidad o reducir el tamaño. El skill también puede generar un guion en árabe egipcio si el usuario lo solicita antes de grabar. Soporta las plataformas Claude Code (bash, Python, Node.js, Playwright) y utiliza Groq para transcripciones, ffmpeg para procesamiento de video y Google Lyria para música opcional. La verificación final transcribe el video completo para asegurar que no se pierda ninguna palabra. Incluye reglas estrictas como no sobrescribir versiones existentes y pedir permiso antes de usar servicios externos.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add ebrahimelbarody74/tornix-demo-video

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Tornix demo video

Grabaciones de pantalla sin editar → un video tutorial con marca, legible y optimizado para WhatsApp. Pipeline: inspeccionar → escribir configuración → renderizar gráficos → construir → verificar → copia para WhatsApp.

Reglas estrictas (cada una proviene de una corrección real)

  1. Nunca cortar el discurso del usuario. Sin eliminación de silencios, sin recortar inicios falsos, sin "apretar" — a menos que el usuario lo pida explícitamente. «مش عايز قص… عايز نفس اللي بعتهولك». Las transiciones solo se superponen en los silencios que build_video.py añade (pad_seconds * 2 >= transition_seconds está verificado).
  2. Nunca sobrescribir una versión que el usuario ya tiene. Cada reconstrucción obtiene un nuevo nombre de archivo (-v2, -v3…); el script lo hace automáticamente a menos que se use --overwrite.
  3. Preguntar una vez antes de enviar audio a Groq (tercero). Después de un sí, está bien para el resto del trabajo.
  4. Verificar transcribiendo el archivo FINAL, no las entradas: cada frase de las grabaciones debe estar presente. Whisper a veces salta un tramo largo en un archivo completo — volver a transcribir esa ventana sola antes de concluir que faltan palabras.
  5. WhatsApp arruina el texto pequeño. Vuelve a codificar cualquier video a ≤720p con baja tasa de bits. Enviar siempre también la copia -WhatsApp (paso 6) y decirle al usuario que presione HD al enviar (o que lo envíe como Documento para calidad completa).
  6. Mantener el estilo que el usuario aprobó; cuando dicen «نفس الاستايل بس الجودة أعلى», solo cambiar la codificación.
  7. Un clip nombrado en la solicitud que NO esté en el video generalmente corresponde a una copia renombrada/recortada que sí lo está (p. ej. ee.mov era un recorte de Screen Recording … 10.46.44.mov) — verificar duraciones/contenido, luego decir cuál se reemplazó.

1. (Opcional) Guion antes de grabar

Si el usuario quiere grabar primero, escribir el guion de narración en árabe egipcio sencillo, como escenas: pantalla → qué hacer → qué decir, total ~4–5 min. Incluir una lista de preparación (1920×1080+, zoom del navegador al 125%, cerrar otras pestañas, micrófono cercano, datos de prueba) y "si te equivocas, pausa 3 segundos y repite la frase — yo lo cortaré" (solo cuando hayan aceptado cortes). Poner el guion en el chat cuando pregunten «اكتب الكلام هنا».

2. Inspeccionar las grabaciones

bash ~/.claude/skills/tornix-demo-video/scripts/inspect.sh <directorio_de_trabajo> grab1.mov grab2.mov …

Imprime duración, una transcripción de Groq Whisper con marcas de tiempo, y escribe inspect/cN-tiles.jpg (1 recuadro por segundo, 6 por fila) — Leer los recuadros para encontrar cuándo aparece cada pantalla (para ventanas de zoom). Usar bash para bucles/separación de palabras: zsh no separa $var (for s in "2 3"; set -- $s se rompe).

Recorte predeterminado 2880x1350+0+238 = una grabación de macOS a pantalla completa de 2880×1748 de Chrome con barra de marcadores, menos el cromo del navegador y el Dock. Si la ventana difiere, medir: crop=2880:60:0:<y> recorta alrededor de los bordes.

3. Escribir la configuración

Copiar examples/atlas-auto-close.json y editar:

  • sections — una por título mostrado en el marco; step (1..n) resalta ese chip de paso, all_done: true = resumen.
  • steps — las etiquetas de los chips debajo del video.
  • clips — en orden: path, section, opcional zooms [{from, to?, x, y, w}] en el espacio de píxeles del recorte en la línea de tiempo ORIGINAL del clip (h se deriva del slot 2400×1125). Hacer zoom en los momentos que prueban la historia: el mensaje escrito en Atlas, el mensaje del chat, la tarjeta «أغلقها أطلس». from/to en un clip lo recorta — solo si se pide.
  • thumbnail — headline ([[palabras]] obtienen el degradado de la marca), subtitle (\n = salto de línea), dos chips, card_image = un recorte del momento de UI más fuerte (ffmpeg -ss T -i clip -frames:v 1 -vf crop=…).
  • speed (1.12 = lo que el usuario pidió una vez; 1.0 = sin tocar), output.
  • intro_music — "synth" (predeterminado, GRATIS): un sting de 3.6 s sintetizado con ffmpeg (ascensor, sub golpe en el brillo de la miniatura, pad, arpegio pulsado), desvaneciéndose bajo las primeras palabras. "ai" = DE PAGO Google Lyria 3.5 mediante el CLI genmedia ($0.10 por generación con la clave fal del usuario) — solo cuando el usuario lo pide y acepta el precio; el usuario dijo «خليه مجاني وليه أوبشن يدفع هو». "none" = silencioso, o una ruta a su propio archivo de audio. intro_music_volume (predeterminado 0.9) — la música se mezcla DESPUÉS de normalizar la sonoridad de la voz, por lo que esto es absoluto; 0.9 coloca el golpe ~1 dB por debajo de la voz.

4. Renderizar gráficos

node ~/.claude/skills/tornix-demo-video/scripts/render_gfx.js <config.json> <directorio_de_trabajo>

Playwright captura pantallas de assets/gfx.html → gfx-out/ (marcos de sección, máscara redondeada, thumb.png, fotogramas de intro/outro a 30 fps). Leer gfx-out/thumb.png y un bgN.png antes de construir. Establecer PLAYWRIGHT_MODULE si no se encuentra Playwright.

5. Construir

python3 -I ~/.claude/skills/tornix-demo-video/scripts/build_video.py <config.json> <directorio_de_trabajo>

~5 min para ~2 min de video en una máquina cargada — ejecutar en segundo plano. Salida: 2560×1440 H.264 (-tune stillimage, CRF 24 ≈ 11 MB para 2 min) + <nombre>-thumbnail.png. Verificar el conteo de fotogramas de una pieza (ffprobe -count_packets) si un paso se alarga: una imagen fija en bucle alimentada a alphamerge nunca termina (una pieza produjo 27k fotogramas antes de ser eliminada) — el script usa una sola imagen fija + overlay en su lugar.

6. Copia para WhatsApp

build_video.py la escribe automáticamente a partir de las piezas de alta calidad (no del archivo CRF-24): scale=1280:720:flags=lanczos,unsharp=5:5:0.6, -crf 17 -maxrate 4M -tune stillimage -g 60 → <nombre>-WhatsApp.mp4 (~15 MB para 2 min). Decirle al usuario: presione HD en WhatsApp, o envíe el master como Documento.

7. Verificar e informar

  • Transcribir el archivo final (regla 4); Leer 2–3 fotogramas a tamaño completo (un zoom, un fotograma con texto pequeño).
  • Informar: ruta(s), duración, tamaño, qué cambió respecto a la versión anterior, qué sigue aplicado (p. ej. velocidad 1.12×).

Archivos

  • scripts/inspect.sh — duraciones, recuadros por segundo, transcripción de Groq.
  • scripts/render_gfx.js — gráficos con marca a partir de la configuración.
  • scripts/build_video.py — piezas → transiciones → música de intro → final + copia WhatsApp + miniatura. --reuse-pieces omite volver a renderizar clips ya en <directorio_de_trabajo>/pieces (cambios solo de audio/codificación toman ~2 min).
  • scripts/intro_music.sh synth|ai <salida.wav> — el sting de intro (sintetizador gratis o Lyria de pago).
  • assets/gfx.html — el diseño del marco/miniatura/outro (2560×1440, RTL, Thmanyah). .scene{overflow:hidden} es esencial: en RTL un elemento que sobresale por el borde izquierdo desplaza toda la captura.
  • assets/ — Marca Tornix + logotipo, figuras de Atlas (idle, celebrating, explaining), pesos Thmanyah.
  • examples/atlas-auto-close.json — la configuración del primer video creado con este skill.

Skills relacionados