clementsprs/product-motion-film

Película promocional de producto premium

Una receta para crear películas de producto de ~40 segundos que parezcan el video de lanzamiento de la propia marca y se sientan vivas: impulsadas por la interfaz de usuario, sin personas, sin voz en off, con música y algunos acentos de sonido. Se perfeccionó a lo largo de aproximadamente quince rondas de revisión en un video de lanzamiento real, incluida la revisión de contenido de la marca asociada; cada regla a continuación comenzó como una nota que volvió en la revisión.

Patrones de código: references/remotion-patterns.md. Lectura de marca: references/brand-reading.md. Formato de brief: references/brief-template.md.

Entradas a recopilar primero

1. El brief: una fila por capacidad (qué pregunta el usuario, qué hace el producto, qué responde la IA). Si no hay, escríbelo (references/brief-template.md) y haz que lo aprueben antes de construir.
2. Las superficies en vivo de la marca: la página de marketing más cercana al tema y la aplicación del producto, abiertas en un navegador.
3. Activos que trae el usuario: logotipo (SVG), icono, patrón de fondo, logotipos de socios y canales (archivos reales), fuentes woff2 con licencia, avatares para personas ficticias (generados o con licencia) y música: pregunta si tienen una pista que les guste antes de generar una.
4. formatos: primero 16:9; los cortes 1:1 y 4:5 solo después de que se apruebe el 16:9.

Si no puedes abrir un navegador, dímelo y pide capturas de pantalla. Nunca adivines los colores o el tipo de letra de una marca de memoria.

1. Leer la marca desde el sitio web y la aplicación en vivo

Obtén los valores reales con un pequeño script en la página (getComputedStyle en el H1, body, botón principal, una tarjeta; consulta references/brand-reading.md): fuente de encabezado / peso / tracking, grises de tinta y secundarios, acento, radio de tarjeta y líneas finas, el tratamiento de fondo, la imagen característica (por ejemplo, un fondo de cielo nocturno) y el logotipo SVG. Escribe cada valor en un único theme.ts con dónde y cuándo se leyó; ningún literal de color en ningún otro lugar.

Una versión construida sobre un kit de movimiento genérico fue rechazada por "no ser premium, no estar en la marca": construye sobre el sistema en vivo de la propia marca.

2. Estructura: una conversación continua

Parte	Duración	Contenido
Gancho	~5 s	Las IA con las que funciona como logotipos completos con nombres, cambiando en un chip y terminando con todos sus iconos juntos; un reclamo corto de dos líneas (tinta + gris); el logotipo del producto aparece de golpe (" lo hace funcionar.")
Conversación ×4	~7-10 s cada una	El mensaje aparece y se escribe solo en grande en el centro → se envía, se desliza a la derecha → línea de estado ("Buscando …" + el nombre real de la herramienta, puntos → ✓) → la tarjeta del producto aparece dentro del hilo y se reproduce por completo → la respuesta de la IA se transmite en una burbuja de mensaje
Final	~3.2 s	El fondo oscuro de la marca se eleva a pantalla completa (el único momento oscuro); "Todo el poder de [logotipo], ahora en tu IA."; URL simple

• Sin intersticiales, sin tarjetas de título, sin leyendas en la parte superior. Una discusión muestra las capacidades. Cada nuevo mensaje es la transición: el hilo se desplaza y el nuevo mensaje que aparece empuja el intercambio anterior hacia arriba. Dentro de un paso, la cámara va de mensaje → tarjeta de producto → respuesta.

• Una cosa a la vez en foco. Sin pantalla dividida con el chat a un lado y el producto al otro ("demasiada información en la pantalla").

• Fondo claro en todo momento. Los resultados del producto viven en la conversación como tarjetas; un panel oscuro que se eleva en medio de la película se sintió como un corte discordante. El oscuro es para la tarjeta final.

• Neutral en cuanto a la IA cuando el producto funciona con cualquier IA (un servidor MCP, una API pública): ningún logotipo, tipografía o color de un solo asistente en el chat. Encabezado = un chip " MCP" + "funciona con" + los iconos de IA; respuestas en la fuente del cuerpo del producto con una cola de color del producto en las palabras que aún llegan.

• La IA habla en burbujas de mensaje (blanco, a la izquierda, opuestas a la burbuja gris del usuario). El texto de respuesta simple se lee como un subtítulo, "no parte de la conversación". No se necesita avatar.

• Termina la ejecución antes de la respuesta: la respuesta comienza solo cuando la tarjeta está lista. Duración del paso = escritura + estado + tiempo de ejecución de la tarjeta + respuesta.

• Tamaños móviles: mensaje ~62 px, estado ~44 px, respuesta ~58 px en un lienzo de 1920 × 1080; tarjetas de producto escaladas ~1.2-1.4× (por tarjeta, para que la más alta aún supere el encabezado).

• Variante liderada por el agente (el producto ES el agente de IA): misma gramática con roles invertidos. El agente escribe primero (burbujas blancas, su marca + marca denominativa en el encabezado), el usuario decide (burbujas grises, una nota de voz con una forma de onda en vivo y transcripción). Muestra el dispositivo, no lo escribas: un momento de teléfono se abre en una pantalla de bloqueo con la notificación push del agente que aparece, luego un toque y el banner se expande a pantalla completa como si se abriera una aplicación, y la conversación está dentro; el icono de la aplicación es la cara del agente sobre un mosaico blanco. El dispositivo se muestra en el ancho: los momentos de teléfono se encuentran dentro de un marco de teléfono (columna estrecha, la notificación se abre dentro de él), los momentos de computadora portátil usan el ancho completo; el marco se abre entre ellos y todo el historial se reajusta al nuevo ancho (coloca el hilo dos veces, teléfono y computadora portátil, y combina posiciones y tamaños con el marco), para que la conversación nunca desaparezca. Nombra el dispositivo una vez ("En tu computadora portátil"), los divisores posteriores muestran solo la hora. Nunca cortes la escena de prueba (una historia de cliente, una referencia) solo para alcanzar una duración: volvió a petición. En una película liderada por un agente, la pequeña marca del agente se sienta junto a cada uno de sus mensajes (a diferencia de las películas MCP neutrales en cuanto a IA). Un día a través de dispositivos se convierte en un chip de contexto de encabezado que cambia ("En tu teléfono · 8:42 AM" → "En tu computadora portátil") más divisores de tiempo en el hilo, nunca marcos de dispositivo. Constrúyelo como una lista de elementos (agente / usuario / voz / tarjeta / divisor, cada uno con una duración de lectura) y calcula los inicios, el diseño y la cámara de desplazamiento a partir de ella.

• Variante de agente proactivo (preferida para externos): cuando el punto es que el agente trabaja para ti, no muestres un chat en absoluto. El agente EMPUJA (una línea de encabezado en su voz + una tarjeta) y el usuario solo toca Aceptar u Omitir (presiona + onda, luego un chip "Aceptado"; Omitir / Aceptar por fila cuando el agente empuja una lista); cuando la tarjeta empujada ya tiene su propio botón de acción ("Agregar a las llamadas de hoy"), el usuario toca ese botón y no hay una fila de Aceptar separada. Un usuario escribiendo instrucciones ("corta la intro y envíala") se lee como un chat LLM simple. Permite UN momento más allá de Aceptar: el usuario hace una pregunta que el agente responde con información ("¿Algo que deba saber sobre Tom?") o pide un extra que hace en el acto; nunca una corrección de copia. Abre los cortes externos con energía: una tormenta de notificaciones de aplicaciones reales que se acumulan y tiemblan, se arrojan, luego "Demasiados hilos." y la marca del agente aparece de golpe.

3. Copia

• Los mensajes suenan como una sola persona que continúa una conversación: la continuidad proviene de referencias a lo que vino antes ("para ellos", "estas señales", "ejecuta esto"), con como máximo una reacción ligera. Nunca una palabra de elogio en cada mensaje.
• Específica y que transmite el valor, con un vocabulario compartido en todos los pasos (por ejemplo, "señales de intención de compra" en cada mensaje).
• Pocos números: ninguno en el gancho (sin precio); los números viven dentro de las tarjetas. Los números de reclamo tienen una fuente en el brief; los números de la interfaz de usuario se marcan como ilustrativos; las personas y empresas son ficticias.
• Nombres de herramientas o API reales en la línea de estado, verificados con la lista de herramientas real del producto. Nunca inventes uno.
• Los logotipos reemplazan los nombres: el logotipo dentro de la línea de cierre; un logotipo + bloqueo de palabra mantiene su espacio de palabra. Sin flecha ni botón en una URL: nada se puede hacer clic en un video.

4. Tarjetas de producto: mostrar lo que la IA realmente hizo

• Una tarjeta por paso, 3-4 filas, el logotipo completo del producto en el encabezado.
• Cualitativo, de la era de la IA, no de plomería: sin etiquetas de combinación {{firstName}} ("no lo suficientemente cualitativo para la era de la IA"). Muestra un mensaje real escrito en vivo para un registro, la frase extraída de sus datos resaltada con un barrido de marcador y un ángulo de una línea.
• Los flujos de trabajo son flujos con ramas condicionales (paso con sus palabras reales → "Esperar 3 días" → "No abierto" → correo electrónico / "Abierto, sin respuesta" → mensaje de voz con una forma de onda en vivo), no una fila de iconos de día. La tarjeta crece hacia abajo a medida que se dibuja el flujo: nunca un bloque vacío.
• Los logotipos de canales reales (LinkedIn, Gmail…) lo hacen auténtico.
• Las listas de estado son registros de ejecución modernos: carril delgado que se llena, puntos pendientes → anillo giratorio → marca de verificación rellena en el color de la marca, una línea de resultado por paso, una pequeña duración. Los cuadrados de iconos en caja con marcas de verificación verdes se leen como "anticuados".
• Un cambio de estado es su propio momento: un interruptor espera a que la tarjeta aterrice, luego la pista se desvanece, la perilla se aplasta, un anillo de pulso se extiende, una etiqueta "Activo" aparece, y solo entonces comienza la ejecución.
• Recorta la interfaz de usuario que no pertenece a la acción que se muestra (una tarjeta de resumen de chat de equipo en un paso de programación "no tiene sentido").

5. Gramática de movimiento: dinámica en los elementos, legible en las pausas

El listón: videos de lanzamiento divertidos donde cada elemento tiene física (un ejemplo público: "Decidimos darle un teléfono a Grok Bot" de Allo, octubre de 2026; no se necesita mascota) y los videos de lanzamiento de los propios asistentes de IA (conversación sin marco, texto grande).

• Muelles, no easing para todo lo que llega (spring() con sobreimpulso; ajustes preestablecidos y un kick() amortiguado en el archivo de patrones).
• Las palabras aparecen con muelle con una ligera inclinación y se empujan unas a otras a medida que se construye una línea; las líneas viejas se tiran, nunca solo se desvanecen. El logotipo aparece de golpe y la línea tiembla una vez.
• Cámara de hilo: coloca el hilo a partir de estimaciones de longitud de texto y desplázalo con muelles suaves entre los puntos de enfoque (nuevo mensaje centrado → tarjeta centrada → respuesta a la vista), pequeños golpes al enviar y al aterrizar la tarjeta. El encabezado se asienta sobre un desvanecimiento blanco para que el contenido desplazado se deslice debajo de él.
• Las tarjetas aterrizan con un muelle (ligera inclinación, un pequeño bache cuando llega la llamada a la herramienta); las filas se deslizan, las etiquetas y las marcas aparecen, las barras sobrepasan, las vistas previas giran.
• Las pausas se mantienen largas, el movimiento es rápido: los pasos de 3.2 s eran "demasiado rápidos, no podemos leer". La dinámica proviene de entradas rápidas (0.3-0.6 s), nunca de pausas más cortas. Respuesta a ~9 palabras/s, ~1 s antes del siguiente mensaje. Cuando la duración y la legibilidad entran en conflicto, gana la legibilidad: ofrécete a eliminar un paso.
• Sin cortes duros, sin transiciones de cuadro completo: un espacio continuo.

6. Música y sonido

• Que te haga sentir bien, alegre, moderna: ~115-122 bpm, batería nítida y rápida sin bombo de club, bajo alegre, punteos / guitarra / marimba, palmas y chasquidos. Rechazado en la revisión: una cama de piano tranquila ("más dinámico"), electropop de cuatro por cuatro ("demasiado discoteca"), cualquier cosa retro ("no es de la vieja escuela").
• Una pista seleccionada que es demasiado corta (los grooves de stock a menudo son de ~25 s): repite bloques completos de 4 compases de su sección completa en los límites del compás, comienza después de su introducción para que la película se abra con toda su energía, mantén su final real en el último fotograma. Nunca estires el tiempo de una pista seleccionada. Receta en el archivo de patrones ("Sonido").
• Generar una: solicita la duración exacta de la película y verifica el volumen por segundo antes de construir sobre ella; los modelos ignoran la estructura indicada (una toma permaneció en silencio durante 15 s antes de su caída). Un mensaje que funcionó está en el archivo de patrones.
• Efectos de sonido solo con una causa visible (chasquidos en los cambios de logotipo y aterrizajes de tarjetas, clics en los envíos, silbidos suaves a medida que los mensajes aparecen y en el final, un timbre cuando el último paso se marca). Mezcla a aproximadamente -14 LUFS.

7. Calidad: nitidez absoluta

• Maestro sobremuestreado 2x (--scale=2, CRF 14, JPEG 100, x264 lento); las rondas de revisión pueden usar un renderizado directo de 1080p.
• Sin desenfoque CSS en superficies grandes; sin desenfoques enormes de box-shadow (Chrome los banda, usa degradados radiales); fuentes woff2 locales con una espera limitada; los SVG con fill="currentColor" se renderizan en negro dentro de <Img>, reescribe el relleno.
• Cambio solo de imagen: renderiza una vez --muted, renderiza cada mezcla de audio como WAV y multiplexa. Cambio solo de audio: re-multiplexa sobre la imagen existente.

8. Construcción y bucle de revisión

1. Prepara un proyecto de Remotion (estructura en el archivo de patrones), completa theme.ts, coloca los activos del usuario en public/.
2. Escribe la película en este orden: lista de logotipos + copia del gancho, PROMPTS, TOOLS, STATUSES, REPLIES, un componente de tarjeta por paso con su altura y escala, luego las constantes de la línea de tiempo (los inicios y la duración se calculan), luego el desplazamiento de la música.
3. Fotogramas fijos en cada paso antes de cualquier renderizado completo (npx remotion still … --frame=<seg × 60> --scale=0.5), como una hoja de contactos: superposiciones, ajuste de línea, tarjetas debajo del encabezado, bloques vacíos, marca de asistente único sobrante.
4. Envía la revisión de 1080p primero; los cortes 4K y sociales solo después de la aprobación. Escribe cada corrección de vuelta en esta habilidad el mismo día.

Las alturas de las tarjetas se miden, no se adivinan: el diseño del hilo reserva la altura de cada tarjeta, y una subestimación hace que el siguiente mensaje se deslice debajo de la tarjeta (una tarjeta de resumen reservada a 452 px se renderizó a ~530 y se superpuso). Suma las partes reales (encabezado + relleno del cuerpo + filas × altura de fila), luego verifica un fotograma fijo del estado final de cada tarjeta contra el elemento que le sigue antes del renderizado completo.

Terminado cuando

• Se lee como una conversación con una IA, una cosa a la vez en foco, cada línea legible en un teléfono en la primera visualización.
• Cada paso termina en el producto antes de que la IA responda; cada tarjeta de producto muestra una salida real y cualitativa con logotipos de canales reales.
• Nada llega o se va sin movimiento; nada permanece tanto tiempo que pierde su energía.
• La música coincide con el estado de ánimo de la marca y la película se puede ver sin sonido.
• El renderizado maestro es 4K, sin artefactos, sin desenfoque, fuentes nítidas, logotipos nítidos.
• El usuario aprueba el 16:9; los cortes sociales se generan a partir de él.

---

Referencias: references/remotion-patterns.md, references/brand-reading.md, references/brief-template.md.