nathanaelhub/make-reel

¿Qué hace make-reel?

Eres el editor, animador y narrador. El usuario escribe una línea ("haz un reel sobre por qué la comida de avión sabe tan insípida"); tú entregas un MP4 que ya has revisado por tu cuenta.

Todo se ejecuta desde la raíz del repositorio con scripts de npm. Todas las rutas a continuación son relativas a la raíz del repositorio.

0 · Configuración (primera vez en una sesión)

Ejecuta npm run doctor. Si aparece ✗, ejecuta npm run doctor -- --fix y vuelve a ejecutar doctor.

• Si no hay proveedor de voz disponible, informa al usuario una vez: los reels serán borradores sin sonido hasta que añadan ELEVENLABS_API_KEY (mejor, sincronización exacta de palabras) o OPENAI_API_KEY al .env, o instalen Piper. En macOS, la voz incorporada say funciona gratis. Luego continúa; un borrador sin sonido sigue siendo útil.
• Nunca imprimas ni confirmes el contenido del .env.

1 · Sabor primero (cuando hay uno)

Un reel sin referencia resulta genérico. Si el usuario proporciona enlaces o archivos de referencia, nombra una marca o dice "como este":

1. npm run ref -- <taste> <enlaces o archivos> (un nombre, o una ruta absoluta para una carpeta de marca privada). Descarga, mide y escribe hojas de contacto.
2. Abre cada refs/*.sheet.jpg con la herramienta Lectura y mira. Luego completa la sección Notas de taste/<taste>/taste.md: ritmo, subtítulos y tipo, color, movimiento, sonido, hacer, no hacer. Sé específico ("mayúsculas condensadas blancas, dos palabras a la vez, tercio inferior"), no genérico ("moderno, limpio").
3. Establece "taste": "<taste>" en script.json.

Si ya existe un sabor para esta marca, lee su taste.md y mira sus hojas antes de escribir nada. Si el usuario quiere un aspecto pulido y no hay sabor, pregunta una vez por 3 a 5 reels que le gusten antes de construir.

Inspirado, nunca copiado: no reutilices el material de archivo, música, redacción, logotipos o diseños exactos de una referencia.

2 · Planifica el reel

Elige un slug corto en kebab-case, luego npm run new -- <slug> "<Título>". Esto crea reels/<slug>/ con script.json, reel.html, assets/.

Lee .claude/skills/make-reel/guides/script.md y escribe reels/<slug>/script.json:

• 6–10 escenas, 30–55 segundos en total. Una idea por escena, 8–20 palabras habladas por escena.
• La escena 1 es el gancho y aterriza en menos de 2 segundos.
• Cada escena tiene id, say (narración exacta) y visual (lo que ve el espectador, con la palabra en la que aterriza cada golpe visual).
• Si el tema es factual, verifica los datos. Verifica cualquier cosa de la que no estés seguro (busca si puedes) y pon la fuente en un remate o nota en pantalla. Prefiere números aproximados ("hasta un 30%") sobre precisión inventada.

3 · Ponle voz

npm run voice -- <slug>

Esto crea voice.mp3 y timeline.json (inicio/fin de escena + marca de tiempo de cada palabra). Lee la tabla impresa: es la sincronización contra la que animas. Los clips se almacenan en caché por escena, por lo que las ediciones posteriores solo vuelven a vocalizar las escenas cambiadas.

4 · Anímalo

Lee .claude/skills/make-reel/guides/scenes.md (la referencia completa del kit) y .claude/skills/make-reel/guides/style.md (el aspecto). Luego escribe reels/<slug>/reel.html: un <section class="scene" data-scene="<id>"> por escena del guión, mismos ids, mismo orden.

Reglas que más importan:

• Sincroniza el movimiento con las palabras. Usa data-at="@word" para que las cosas aterricen cuando se dicen. Cada escena debe tener un golpe en su palabra clave, no solo una entrada en 0.
• Algo se mueve en todo momento. Sin tramo más largo de ~2s sin que nada cambie. Usa golpes sincronizados con palabras, data-loop, contadores, dibujo de líneas SVG.
• Diseño: texto dentro de x 72–1008. Titulares desde y≈230. Visual principal entre y≈450 y 1180. Los subtítulos se sitúan en y≈1240–1440; mantén el contenido fuera de esa banda, o establece data-captions="top" / "off" en la escena. Nada importante debajo de y 1700 (la UI de la app lo cubre).
• Las posiciones son absolutas (class="abs" + left/top en línea). Nunca uses animaciones o transiciones CSS; todo el movimiento proviene de atributos de datos o hooks Reel.on(), y todo funciona con resortes (spring, spring-snappy, spring-bouncy, spring:k,c,m). De lo contrario, la verificación falla.
• Sin texto centrado en mayúsculas sobre un gradiente de color (la verificación falla en eso).
• Visuales: emoji, SVG en línea, formas CSS, tarjetas/teléfono/ventana/sello/chips del kit, e imágenes en reels/<slug>/assets/. No descargues imágenes de personas reales ni uses logotipos o personajes que no poseas.

5 · Revisa tu propio trabajo (siempre, antes de renderizar)

npm run check -- <slug>

1. Corrige cada error ✗. Corrige las advertencias ⚠ a menos que tengas una razón para no hacerlo.
2. Abre cada PNG de hoja de contacto que liste con la herramienta Lectura y realmente mira. El linter no puede juzgar el gusto. Busca: elementos superpuestos o apretados, texto difícil de leer, escenas vacías o aburridas, visuales que no coinciden con la narración, subtítulos cubriendo contenido, estilo inconsistente entre escenas.
3. Si el reel tiene un sabor, la verificación imprime sus hojas de referencia. Míralas junto a las hojas del reel y nombra las tres diferencias más grandes (ritmo, tipo, color, movimiento). Corrige las que importan, o explica por qué no.
4. Edita, vuelve a ejecutar la verificación, mira de nuevo. Repite hasta que esté limpio. Generalmente de 1 a 3 rondas.

6 · Renderiza

npm run render -- <slug>. Salida: out/<slug>.mp4. Usa --draft para una vista previa rápida a media resolución, --from 10 --to 18 para renderizar solo una sección.

Después del renderizado, extrae 3–4 fotogramas del MP4 (ffmpeg -ss <t> -i out/<slug>.mp4 -frames:v 1 f.jpg) en transiciones y golpes sincronizados con palabras y míralos, para que sepas que el MP4 coincide con lo que mostró la verificación.

Entrega: la ruta del MP4, su duración, la voz utilizada y una línea sobre cualquier cosa que aún mejorarías. Si el usuario está en su propia máquina, menciona npm run preview -- <slug> para verlo con audio en el navegador.

7 · Bucle de retroalimentación

Lee .claude/skills/make-reel/guides/feedback.md. El usuario dirá cosas como "se siente raro", "el gancho es débil", "la escena 4 se alarga", "haz el sello más grande". Asigna cada nota al cambio más pequeño:

• Redacción, ritmo, escena demasiado larga/corta → edita script.json, luego npm run voice (solo las escenas cambiadas se vuelven a vocalizar). Las marcas de tiempo de las palabras se mueven, pero las referencias @word se siguen automáticamente.
• Aspecto, diseño, movimiento, sincronización de un golpe → solo edita reel.html. Sin nueva vocalización.
• Luego verifica → mira las hojas → renderiza. Di qué cambiaste en una o dos líneas.