rendydev404/product-motion-ad

Product Motion Ad (Remotion + ElevenLabs)

Resultado final: MP4 1920×1080 30 fps, 30–45 segundos, gancho potente, locución en el idioma objetivo que suene humana, SFX profesional, transiciones rápidas al estilo de la referencia, y flujo = flujo real del producto. Se envía al usuario con SendUserFile.

La plantilla probada está en template/ (carpeta de este skill). Ejemplos completos de 13 escenas de proyectos reales están en references/example-scenes-threads-automation.tsx.txt y references/example-promo-threads-automation.tsx.txt. Lee references/script-and-storyboard.md antes de escribir el guion y references/elevenlabs.md antes de crear el audio.

Principios que no deben violarse

1. El producto debe ser claro en los primeros 8 segundos: nombre del producto + "qué hace para quién".
2. El orden de las escenas = orden del flujo de uso del producto (registro/inicio de sesión -> configuración -> proceso principal -> resultado -> funciones avanzadas -> evidencia de resultados -> CTA). No lo mezcles.
3. Una frase de locución = una escena = una ventaja + su evidencia visual (IU en movimiento: formulario llenándose, botón pulsado, tarjeta de resultado apareciendo, números subiendo). No solo texto.
4. Hechos de la fuente del producto, no inventados: lee el código/landing/onboarding/página "cómo funciona". Los números de ejemplo (vistas, puntuaciones) pueden ser ilustrativos, pero debes indicar al usuario que son ilustrativos.
5. Ritmo rápido como en las referencias: transiciones de 10 fotogramas (T = 10), animaciones dentro de la escena aceleradas con speed 1.5–3. No alargues una escena para llenar una locución lenta: mejora la locución.
6. Locución humana: una sola toma completa, estilo conversacional, ritmo rápido, sin etiquetas de emoción en cada línea. No es por frases separadas (eso la hace rígida).
7. Sigue las reglas de rendimiento del usuario: mide una sola vez al inicio y al final, no renderices repetidamente sin motivo.

Flujo de trabajo

1. Recopila el material (en paralelo si es posible)

• Producto: si está en el repositorio, busca texto de landing, onboarding, página de cómo funciona/características, nombres de funciones en la IU (Grep de cadenas de IU). Si está fuera del repositorio: pide una descripción/URL. Escribe una tabla de flujo de ventajas: Paso | Acción del usuario | Ventaja | Evidencia visual (IU mostrada).
• Marca: colores y fuentes de CSS (globals.css, tema de Tailwind, CSS de landing), logotipo de public/. Completa template/src/theme.ts (C, GRADIENT, fuente, BRAND).
• Referencia de estilo (si hay video): extrae fotogramas con ffmpeg incluido en Remotion y luego revisa la hoja de contactos: npx remotion ffmpeg -v error -i "<video>" -r 3 -s 340x192 <dir>/f%03d.png (los filtros fps=/tile NO están disponibles en el ffmpeg de Remotion; usa -r y scripts/contact-sheet.cjs). Anota: fondo (blob borroso/rejilla de puntos), cómo aparece el texto, cortes abruptos, IU en 3D, clic del cursor, resplandor, ritmo.

2. Guion y storyboard

Sigue references/script-and-storyboard.md: gancho de 3 tiempos (brecha de curiosidad), 1 línea de ≤10 palabras por escena, estilo conversacional, la primera oración comienza con una palabra de apertura ("Eh,") para que la palabra clave no se pronuncie mal en el segundo 0, CTA corto. Muestra el guion + el orden breve de escenas al usuario solo si el brief es ambiguo; de lo contrario, trabaja directamente.

3. Proyecto Remotion

• Copia template/ a una nueva carpeta en el repositorio del usuario (p. ej., promo-video/), npm install.
• Si está dentro de otro repositorio Next.js/TS: agrega esa carpeta a exclude en tsconfig.json raíz y a globalIgnores de ESLint. La carpeta ya tiene su propio .gitignore (node_modules, out).
• Copia el logotipo a promo-video/public/ y configura BRAND.logo.
• Escribe las escenas por producto en src/scenes.tsx (usa el patrón de los ejemplos: useFrame(), useRise/rise, glass/white, StepTag, Words, typed+Caret, Cursor, BlurFilter). La escena genérica makeFeature solo para prototipos.
• Completa DEFS en src/Promo.tsx: orden de escenas, cue (frase de inicio de la línea de locución), beats (gancho), speed, transiciones, dark, sfx.

4. Audio de ElevenLabs (consulta references/elevenlabs.md)

• Locución en una sola toma -> public/vo/full.mp3; transcripción Scribe por palabra -> public/vo/words.json. Revisa la transcripción (¿palabras mal pronunciadas? ¿líneas faltantes?).
• Paquete de SFX de 10 archivos -> public/sfx/*.mp3.
• Línea de tiempo automática: la escena comienza 6 fotogramas antes de que se pronuncie la frase cue; los SFX se colocan en el tiempo de diseño de la escena (dividido por speed).

5. Renderizado y verificación

• npm run typecheck y luego npm run render (puerto 3456 — el puerto 3000 suele estar ocupado por el servidor de desarrollo de Next, y el renderizado fallará con "not a valid Remotion project").
• Ejecuta el renderizado en segundo plano si toma más de 2 minutos.
• Revisa lo visual: node <skill>/scripts/contact-sheet.cjs out/promo.mp4 <scratchpad>/chk y luego lee la hoja. Para segundos específicos, proporciona una lista de segundos. (La muestra con -r de ffmpeg a menudo muestra fotogramas iniciales vacíos falsos; revisa segundos específicos si dudas).
• Verifica: el texto no esté borroso permanentemente, no esté cortado/envuelto, las etiquetas de paso no estén cubiertas por paneles, las animaciones clave terminen antes de que cambie la escena, el texto en pantalla coincida con las palabras de la locución.
• Envía con SendUserFile (muestra render), informa la duración, el tamaño y lo que no se ha verificado (p. ej., el nivel de audio no se ha escuchado directamente).

Errores ya ocurridos (evítalos)

Problema	Causa	Solución
El texto del gancho se ve borroso continuamente	el valor de desenfoque de la fase anterior (out1) permanece en 1	calcula el desenfoque por fase: solo al entrar/salir
El video se vuelve lento	la escena se estira para seguir una locución lenta	locución más rápida y guion más corto; speed se mantiene
Locución rígida	clips por oración + etiqueta [excited] en cada línea + lenguaje formal	una sola toma, estilo conversacional, sin etiquetas repetidas
La primera palabra se pronuncia mal ("akun" -> "kurun")	v3 a menudo falla en la primera palabra	empieza con "Eh," / "Nah," y revisa la transcripción de Scribe
El renderizado falla "getStaticCompositions undefined"	el puerto 3000 está ocupado por Next en desarrollo	--port=3456
Error de fps=/tile	el ffmpeg de Remotion es limitado	-r + contact-sheet.cjs (sharp)
La oración se envuelve en 2 líneas y el avatar se corta	el elemento flex se encoge	flexWrap: "nowrap", reduce el tamaño de la fuente
El panel cubre la etiqueta de paso	translateY de la cámara demasiado grande	limita el movimiento de la cámara, scale(0.92)
Chip/tarjeta chocan entre sí	posiciones polares demasiado cercanas	revisa la hoja de contactos, ajusta el ángulo/radio
useId() en url(#id) falla	el id contiene :	usa useFilterId() (sanitizado)
El MCP de ElevenLabs no se carga después de iniciar sesión	la nueva herramienta aparece en una sesión nueva	usa la herramienta directamente si está disponible; si no, claude -p headless (consulta la referencia)
El MCP falla "Protected resource ... does not match"	región del host	claude mcp add -s user --transport http elevenlabs https://api.us.elevenlabs.io/v1/mcp