site-to-reel

Site to Reel

Crea un cortometraje vertical sobre un sitio web usando el propio sitio: páginas reales, clics reales, estados reales. Cada fotograma es dibujado por un renderizador de canvas como una función pura del tiempo, luego se captura fuera de línea y se codifica. Esta habilidad es el flujo de trabajo interno destilado del reel de Dawas Shlef. La carpeta examples/dawas-shlef/ contiene las líneas de tiempo, guiones de voz, scripts de captura y notas de revisión de ese proyecto como referencia práctica. Trátala solo como referencia. No copies su lista de escenas a un producto diferente.

Cargar junto con:

• video-director para los principios de realización y sus scripts scripts/check_timeline.py y scripts/qa_video.py.
• playwright-cli para cada paso del navegador.

Si falta alguna de estas habilidades, dilo. No improvises sin ellas.

Innegociables

Estas condiciones provienen del briefing que dio forma a la habilidad y se aplican a cada proyecto:

1. Solo UI real. Captura el sitio local en vivo. Muestra un cambio de estado haciendo clic en el control real y capturando el resultado real, nunca dibujándolo. No inventes pantallas, contadores ni notificaciones.
2. Deja el mundo del usuario como lo encontraste.
   • No rediseñes, modifiques, despliegues ni publiques el sitio.
   • No lances campañas ni envíes formularios.
   • Crea solo datos de demostración, como un marcador, y elimínalos después. Registra el almacenamiento antes y después.
   • Nunca borres datos de usuario existentes.
   • Detén los servidores y las sesiones del navegador que hayas iniciado. Deja el servidor del sitio del usuario funcionando a menos que él apruebe detenerlo.
3. URL pública en pantalla, nunca localhost. La URL aparece al inicio (a los 3 s) y en la tarjeta final.
4. Las afirmaciones se quedan dentro de brand.json → claims. Las palabras nunca son más fuertes que la fuente. Un crítico debe señalar cualquier otra cosa, por ejemplo "no se necesita cuenta" cuando el briefing no lo dice.
5. Voces.
   • Nunca clones la voz de una persona.
   • Nunca insinúes que una voz generada es una grabación real.
   • Un narrador TTS habla sobre el creador solo en tercera persona, así "hecho por X", nunca "yo soy X". Las líneas en primera persona en pantalla se cambian para coincidir.
   • Indica al usuario que etiquete el audio de IA al publicar.
6. No llames final a un corte inacabado. Los cortes sin sonido son "animáticas". Los archivos solo se nombran *-final cuando el sonido existe y ha pasado la revisión de calidad.
7. No afirmes lo que no mediste. No puedes ver ni oír la salida. Informa las comprobaciones que ejecutaste y los fotogramas que miraste, y di claramente lo que nadie ha visto ni oído, como la pronunciación del TTS o la sensación en tiempo real.
8. Nunca publiques ni subas contenido por el usuario. Puedes subir a su GitHub cuando te lo pida, pero publicar en Instagram y otras redes sociales siempre es cosa suya.

Flujo de trabajo (tres puertas de aprobación)

Etapa	Tú produces	Puerta
0. Toma de requisitos	Una ronda de preguntas (abajo). Lee el briefing, los activos y el sitio. Completa brand.json.
1. Tratamiento y aspecto	TREATMENT.md con la idea en una frase, el gancho, la escaleta con lecturas, el momento héroe y las afirmaciones. Un estudio del sitio de solo lectura. 2–4 fotogramas de estilo del renderizador real. Un primer timeline.json.	El usuario aprueba.
2. Animática silenciosa	Capturas, la línea de tiempo completa, fotogramas renderizados y codificados como *-animatic-silent.mp4. QA. Hojas de contacto, transición y detalle más un storyboard, todo a partir del MP4 codificado. Revisión del crítico con una ronda de correcciones. Notas de revisión.	El usuario aprueba ritmo y encuadre.
3. Versión final	Narración (grabada, o TTS si el usuario lo elige) ajustada al metraje aprobado. Música y SFX. Una mezcla a −16 LUFS y ≤ −1 dBTP. Subtítulos. *-final.mp4. QA. Crítico con una ronda de correcciones. Portada. Notas actualizadas.	El usuario escucha y aprueba.

Usa el modo ask-first cuando el usuario esté presente. Pregunta una vez, luego toma todas las demás decisiones tú mismo y regístralas como DECISIÓN: ... porque ... en las notas de revisión, para que cada una pueda revertirse con una respuesta.

Preguntas de toma de requisitos (una ronda, opción recomendada primero)

Pregunta solo lo que el briefing y el sitio no respondan ya.

1. Qué y para quién: la única cosa que el vídeo debe decir, la audiencia, y el idioma y dialecto de los subtítulos.
2. Plataforma y duración: Instagram Reels 9:16 a 1080×1920 (por defecto), un corte principal de 45 s más una versión separada de 15 s, y si se necesita 16:9 (por defecto no).
3. Datos: las afirmaciones permitidas y la ortografía exacta de la marca, el nombre del creador y la URL pública.
4. Activos: colores y fuentes de la marca, logotipo o isotipo, y qué estados y funciones del sitio mostrar.
5. Sonido: el usuario graba la voz en off (preferido), o TTS con divulgación, o solo música y subtítulos. Pregunta sobre los derechos de la música.
6. Límites: lo que no debe tocarse (el servidor del sitio, los datos de usuario existentes, los formularios).

Para "hacer el vídeo ahora" sin grabación disponible, pregunta cómo obtener el sonido. Las opciones son: música + subtítulos sin voz, el usuario graba, o un narrador generado. Si eligen TTS, verifica qué está instalado antes de instalar algo. Instalar edge-tts envía el texto del guión al servicio en línea de Microsoft, así que obtén primero el sí del usuario y deja que elija la voz.

Estructura del proyecto

Copia templates/project/ en una nueva carpeta de proyecto, luego edítala:

brand.json            nombre, isotipo, creador, URL pública, tokens de paleta, fuentes, afirmaciones, neverSay, voz, área segura
reel.html, reel.js    el renderizador (neutral para la marca; lee todo de la línea de tiempo)
vo-lines.json         líneas de VO: [inicio más temprano s, texto, final más tardío s]
assets/fonts, assets/icons, assets/previews
capture3x/            capturas + boxes.json (escrito a partir de la salida de tools/capture.js)
tools/
  survey.js           estudio de página de solo lectura (encabezados, enlaces, posiciones y, claves de almacenamiento)
  capture.js          capturas + cuadros de llamada, datos de demostración creados y restaurados
  cli3x.config.json / cli4x.config.json / render.config.json   configuraciones de playwright-cli
  build_timelines.py  timeline.json + timeline-ad15.json a partir de brand.json (+ vo/*.json)
  styleframes.js, stills.js, render-frames.js, shot-storyboard.js   scripts run-code
  make_vo.py, make_audio.py, make_srt.py                            voz, sonido, subtítulos
  review_frames.py, storyboard.py                                   hojas a partir del MP4 codificado

Comandos

CLI significa node "<argo>/node_modules/playwright/cli.js" cli, o simplemente playwright-cli si está instalado. Cada script run-code es un único async page => {}. Los parámetros viajan en la consulta de la URL de la página, y --raw imprime solo el valor devuelto.

# captura (sitio local ya funcionando; sesión limpia en memoria)
CLI -s=cap open --config=tools/cli3x.config.json "about:blank"
CLI -s=cap --raw run-code --filename=tools/survey.js
CLI -s=cap --raw run-code --filename=tools/capture.js      # guarda {"caps": ...} en capture3x/boxes.json
CLI -s=cap close

# línea de tiempo + puerta
python -X utf8 tools/build_timelines.py
python -X utf8 ~/.claude/skills/video-director/scripts/check_timeline.py timeline.json

# renderizado (servidor estático temporal, se detiene después)
python -m http.server 4380 --bind 127.0.0.1
CLI -s=render open --config=tools/render.config.json "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<directorio abs de fotogramas>&times=1.2,24.5"
CLI -s=render --raw run-code --filename=tools/styleframes.js
CLI -s=render goto "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<directorio abs de fotogramas>&from=0&to=1349"
CLI -s=render --raw run-code --filename=tools/render-frames.js   # películas largas: ejecutar en segundo plano o en fragmentos

# codificación (animática silenciosa; para versión final añadir -i out/audio/<película>-mix.wav -map 0:v -map 1:a -c:a aac -b:a 192k -ar 48000 -t <dur>)
ffmpeg -framerate 30 -start_number 0 -i <fotogramas>/frame_%04d.png -frames:v 1350 -c:v libx264 -preset slow -crf 16 -pix_fmt yuv420p -r 30 -vf setsar=1 -movflags +faststart out/reel-animatic-silent.mp4

# medición y revisión (siempre a partir del MP4 codificado)
python -X utf8 ~/.claude/skills/video-director/scripts/qa_video.py out/reel-final.mp4 --beats timeline.json --lufs -16 --tp -1 --out out/qa-reel
python -X utf8 tools/review_frames.py out/reel-final.mp4 timeline.json reel
python -X utf8 tools/storyboard.py out/reel-final.mp4 timeline.json reel
CLI -s=render goto "http://127.0.0.1:4380/out/storyboard-reel.html?shot=<abs>/out/storyboard-explained.png"
CLI -s=render --raw run-code --filename=tools/shot-storyboard.js

# etapa 3
python -X utf8 tools/make_vo.py && python -X utf8 tools/build_timelines.py && python -X utf8 tools/make_audio.py && python -X utf8 tools/make_srt.py

En Windows, ejecuta Python como python -X utf8 con PYTHONIOENCODING=utf-8, o la salida en árabe se romperá.

Bucle de revisión

• Crítico. Después de la etapa 2 y nuevamente después de la etapa 3, entrega a un subagente con contexto nuevo los MP4, líneas de tiempo, hojas e informes de QA. Pide una lista clasificada: debe arreglarse, debería arreglarse, detalles, cada uno con un código de tiempo y una corrección concreta. Solo lectura, menos de 500 palabras, sin problemas inventados.
• Una ronda de correcciones. Aplica una ronda de correcciones, luego vuelve a verificar a partir del MP4 codificado.
• Correcciones acotadas. Para una corrección limitada a algunos fotogramas, respalda esos fotogramas, renderiza solo ese rango de nuevo, luego compara con la copia de seguridad. Los fotogramas fuera del cambio deben ser byte-idénticos antes de recodificar.
• El informe del crítico es salida del modelo. Nunca cuenta como aprobación del usuario.

Entregables

• out/<película>-animatic-silent.mp4 (etapa 2) y out/<película>-final.mp4 (etapa 3).
• out/storyboard-explained.png, out/contact-sheet-<película>.jpg, out/review/, out/qa-*/.
• timeline*.json, vo-lines.json, vo/, out/audio/ (mezcla más pistas), out/subtitles-*.srt.
• out/cover/reel-cover.jpg y su vista previa en cuadrícula 3:4.
• voiceover-script-*.txt, marcado como con voz (motor, voz, divulgación) o como no grabado.
• review-notes.md: metadatos de ffprobe, estructura, cada comprobación con su número, la tabla del crítico y sus correcciones, DECISIONES, limitaciones declaradas claramente, comandos exactos y decisiones dejadas para el usuario. La plantilla es references/report-template.md.

Referencias (léelas cuando llegues a esa etapa)

• references/motion.md: modelo de cámara, transiciones, sincronización de texto, llamadas, subtítulos, tarjeta final, pausas.
• references/capture.md: estudio, captura, intercambios de estado real, cajas, restauración de datos de demostración.
• references/sound-and-voice.md: grabado vs TTS, ajuste de VO a la imagen, silencio heroico, música, mezcla, subtítulos.
• references/instagram-reels.md: formato, zonas seguras, gancho, redacción de CTA, portada, etiqueta de IA.
• references/gotchas.md: cada error que encontramos y su corrección.
• references/report-template.md: esqueleto de review-notes y mensaje final.
• examples/dawas-shlef/: el ejemplo completo trabajado (sin capturas ni fuentes, así que recupéralas).