smasikurr/RemotionMaster

Lanzamiento de Producto

Cómo usar este manual. Es una receta, no un conjunto de reglas: cada formato, duración, ritmo y fórmula que aparece a continuación son valores por defecto, y lo que el usuario pida tiene prioridad. No empieces con preguntas: usa los valores por defecto, construye, y menciona los valores que elegiste en una línea cuando compartas el primer render (pregunta solo si falta algo esencial, como el metraje en sí). El primer render es la propuesta, por lo que no hay un plan que aprobar primero. Los storyboards solo cuando el usuario pida ver las tomas primero. Los archivos de planificación que menciona el método (BRIEF.md, PLAN.md y similares) son tus propias notas de trabajo: escríbelos cuando te ayuden, nunca como un paso para el usuario.

Entra un producto; sale un video de lanzamiento pulido. Del tipo que ves en X cuando un equipo SaaS lanza algo: un gancho que nombra el problema, el nombre del producto cayendo en un drop, tres funciones mostradas en la interfaz real, prueba y una tarjeta final limpia. Impulsado por música, generalmente sin voz en off, de 20 a 60 segundos.

Referencia de construcción: la demo de lanzamiento de Notion de Moritz (46 s, 16:9, sin voz en off, 120 BPM). Nueve fotogramas: gancho de herramientas dispersas sobre fondo oscuro, logo y titular giratorio en el drop, el video hero real en una ventana flotante, tres fotogramas de funciones (captura, pregunta, agentes) construidos a partir de la interfaz real de Notion, un rollo de casos de uso, un muro de logos con estadísticas y un bloque de CTA. Su plan está en references/example-notion.md. Iguala ese nivel.

El método es fijo; la herramienta no. Si el proyecto ya tiene una herramienta de video, úsala. Si no, inicia un proyecto de Hyperframes (npx hyperframes init) y copia template/hyperframes/ como composición inicial.

<playbook> a continuación significa esta carpeta (la ruta local que devolvió get_playbook).

Qué entra, qué sale

• Entrada: lo que se lanza (URL, la aplicación en sí, capturas de pantalla, grabaciones, un brief o un guion pegado), para quién es, dónde se publicará. Opcional: archivos de marca, un guion de voz en off, una pista musical.
• Salida: un mp4 de 20 a 60 s (16:9 por defecto, 9:16 o 1:1 a solicitud) con la interfaz de usuario real del producto, tipografía cinética, música y efectos de sonido en una cuadrícula de ritmo, revisado y aprobado en FrameJam.

Valores por defecto (la solicitud del usuario anula cualquiera de ellos)

Dedúcelos a partir de la solicitud y los archivos. Cuando no se diga nada, usa el valor por defecto y continúa; pregunta solo si falta algo esencial.

• La promesa en una línea. Lo que el espectador debe recordar. Todo lo demás es evidencia de ello.
• Duración y formato: feed de X 30–45 s 16:9 (por defecto); hero de aterrizaje 30–45 s 16:9, primero sin sonido; Reels 9:16 ≤ 30 s.
• Sonido: solo música (por defecto, se reproduce sin sonido en autoplay, por lo que el texto lleva la historia) o voz en off + música.
• Fuente de interfaz real: la aplicación en ejecución (grábala), el sitio web (captura pantallas y su video hero) o archivos que el usuario proporcione. Si no hay nada real que mostrar, dilo; no inventes una interfaz.
• Estilo: usa el estilo elegido para este video, si lo hay (de wait_for_pick, o get_preset cuando el usuario nombre uno). Si el usuario eligió un estilo de FrameJam, define el aspecto completo (paleta, tipografía, sensación de movimiento, transiciones). Sin estilo: deriva el aspecto de la propia marca del producto (colores, fuentes, superficies de interfaz).
• Hechos: estadísticas, logotipos de clientes y afirmaciones solo del sitio web del producto o del usuario. Sin números inventados.
• Música: el script gratuito incluido (scripts/launch_bed.py) por defecto, una pista que el usuario posea o una pista de biblioteca con licencia. Los servicios de música generada son de pago; detente y pregunta antes de usar uno.

Proyecto existente hecho con otra herramienta: quédate en esa herramienta. El método (cuadrícula de ritmo, storyboard, interfaz real en ventanas, revelaciones con ritmo, verificación, bucle de FrameJam) y los scripts (launch_bed.py, sheet.sh) funcionan con cualquier herramienta.

Cuando no se diga nada: solo música, 16:9, ~40 s, el aspecto de la marca. Nombra los valores por defecto que usaste cuando compartas el primer render.

Flujo de trabajo

1. Recopila el producto real

Reúne el material antes de escribir una sola línea. Detalles en references/assets.md.

• Aplicación: graba tomas cortas y limpias de cada función (una acción por toma, 2880 px de ancho o más, sin notificaciones, datos de demostración realistas). Mantén las temporizaciones de los eventos (cuándo aterriza el clic, cuándo aparece el resultado).
• Sitio web: guarda el video hero, capturas de pantalla de página completa y de secciones a 2x, el logo (SVG), las fuentes, los titulares exactos, las estadísticas y los logotipos de clientes. Los usuarios de Hyperframes pueden ejecutar npx hyperframes capture <url> -o capture.
• Escribe ASSETS.md: una línea por archivo con lo que muestra, tamaño y, para videos, los momentos clave en segundos.
• Verdad de la marca: colores (tinta, lienzo, un acento), fuentes de visualización y cuerpo, cómo se ve la interfaz (radio, sombra, cromo).

2. Historia y cuadrícula de ritmo

Lee references/story.md. Luego escribe STORYBOARD.md:

• Elige un arco (problema → plataforma, bucle de demostración, antes/después, cascada de funciones). Escribe la promesa en una línea.
• 6–10 fotogramas. Cada fotograma tiene un trabajo: gancho, introducción del producto, función, beneficio, prueba, CTA. Una función se muestra como una secuencia corta en la superficie real (entrada → acción → resultado), no como una captura de pantalla estática.
• Agentes y asistentes de IA: muestra una solicitud real de principio a fin: se escribe en la entrada y se envía, se convierte en un mensaje, los pasos del agente aparecen uno por uno (los anteriores se atenúan), el resultado aterriza como una tarjeta con hechos exactos y una marca de verificación, y el fotograma se mantiene en el resultado antes del bloqueo. Las solicitudes y los resultados son específicos (nombres, horas, recuentos), nunca texto de marcador de posición.
• El gancho dura 3–4 s y funciona sin sonido: el dolor o deseo del espectador en sus propias palabras, nunca "X es una plataforma que…".
• Cuadrícula de ritmo primero. Elige un tempo (110–128 BPM; a 120 BPM un pulso es 0.5 s, un compás 2 s). Cada fotograma comienza en un tiempo fuerte y dura compases enteros. Marca los drops: generalmente el nombre del producto y la sección de prueba. Cada revelación en cada fotograma aterriza en un pulso.
• Con voz en off: escribe SCRIPT.md en señales cortas (6–20 palabras por fotograma) y deja que la voz establezca las duraciones de los fotogramas; la música aún sigue la cuadrícula debajo.
• Escribe un bloque ## Dirección de video una vez al principio: roles de paleta, roles de tipografía, cómo entran las ventanas, reglas de movimiento, qué fotogramas son oscuros "de impacto", qué nunca aparece.

Luego construye; el primer render es la propuesta. Si el usuario quiere ver los fotogramas primero, dibújalos y revísalos en FrameJam como un storyboard: open_review con panelsDir (una imagen por fotograma, nombrada 01-hook.png…), luego wait_for_feedback.

3. Diseño de tomas

Para cada fotograma, escribe una lista de tomas con código de tiempo contra la cuadrícula de ritmo (references/shots.md): Escena 1 (0.0–0.5s): … con lo que está en pantalla, dónde está y cómo se mueve. Reglas:

• En t=0 muestra solo la primera cosa. Cada otra pieza llega en su pulso (o su palabra hablada). Nunca vuelques todo el fotograma en el primer cuarto y lo dejes reposar.
• La interfaz real se sienta en una ventana de producto flotante (radio de marca, borde fino, sombra suave en capas) con un asentamiento 3D al entrar. Nunca recortes texto de interfaz a mitad de palabra. Reconstruye solo el componente que tiene que moverse (un cuadro de búsqueda que escribe).
• Un color de acento por fotograma, una palabra resaltada por titular.
• Termina cada fotograma en una lectura sostenida. La quietud vence a la respiración perezosa o una cámara a la deriva.
• Transiciones entre fotogramas: cortes duros en el pulso por defecto; zoom-through en cambios de sección; push-slide para una serie de funciones.

4. Música y sonido

Lee references/music.md. Ruta por defecto, gratuita: escribe cues.json a partir del storyboard (secciones en compases, drops y un efecto de sonido para cada golpe, pop, clic, escritura y entrada de ventana), luego uv run <playbook>/scripts/launch_bed.py cues.json --out assets/music/bed.wav (o python3 con numpy, scipy y soundfile). Los efectos de sonido provienen de la misma hoja de señales, por lo que se colocan exactamente en los cortes. Si el usuario trae una pista: mide su tempo, corta la cuadrícula para que coincida y comienza la pista en su sección más fuerte en lugar de una introducción lenta.

5. Construcción

Construye fotograma por fotograma en la herramienta del proyecto. Las notas de Hyperframes (y los errores que encontramos) están en references/hyperframes.md; el inicio es template/hyperframes/.

• Una composición por fotograma, o un archivo con una capa por fotograma para piezas cortas. Mantén los tiempos locales del fotograma.
• Anima con estados explícitos (seguros para búsqueda), suavizados de cola larga (power3/expo.out), sin rebote, sin bucles infinitos, sin aleatoriedad.
• Videos de producto: asigna a cada <video> un id; mueve un div contenedor para movimientos de cámara, no el elemento de video.
• Con subagentes paralelos disponibles, asigna a cada uno un fotograma: su bloque de storyboard, ## Dirección de video, las líneas de activos que usa y "edita solo tu archivo". De lo contrario, construye en orden tú mismo.

6. Verificar, renderizar, revisar

• Verifica/limpia en la herramienta, luego renderiza a un nuevo archivo por versión (renders/v1.mp4, v2.mp4…).
• bash <playbook>/scripts/sheet.sh renders/v1.mp4 crea una hoja de contacto a 2 fps; léela. Mira cada punto medio del fotograma y ambos lados de cada corte. Verifica: nada cargado al principio, ningún texto recortado o debajo de la banda de subtítulos, ningún salto en las costuras, el drop aterriza con el nombre, la tarjeta final se mantiene ≥ 1.5 s.
• ffmpeg -i renders/v1.mp4 -vf freezedetect=n=0.003:d=2 -f null - marca tramos muertos; una congelación está bien solo donde planeaste una pausa.
• Revisar en FrameJam: open_review con videoPath = el render (ruta absoluta), abre la URL en el navegador integrado, wait_for_feedback. Mapea cada nota a su fotograma por marca de tiempo, corrige, renderiza v2, verifica de nuevo, luego add_version con una nota de una línea y espera de nuevo. Repite hasta que esté aprobado.
• Entrega el mp4 final (X: H.264, ≤ 2:20, ≤ 512 MB) con su duración y la lista de fotogramas.

Nivel de calidad

• Producto real, verazmente: cada toma de interfaz es una grabación o captura de pantalla real. El texto, las estadísticas y los logotipos provienen de las fuentes propias del producto. Logotipos de terceros solo donde el producto mismo los muestra (integraciones, clientes).
• La promesa aterriza en el fotograma 2. El gancho habla del dolor o deseo del espectador; el nombre llega en el drop.
• Cada revelación está en un pulso (o su palabra hablada), y la música, los efectos de sonido y los cortes comparten una cuadrícula.
• Legible de un vistazo: 1–7 palabras por titular, ≥ 64 px a 1080p, un punto focal por fotograma.
• Movimiento premium: asentamientos suaves, ventanas con profundidad, costuras con velocidad coincidente; sin rebote, sin flotación de protector de pantalla, sin formas genéricas prediseñadas que representen al producto.
• Funciona sin sonido: la historia se lee solo con el texto y la interfaz.
• Míralo tú mismo (hoja de contacto + verificaciones de corte) antes de cada ronda de FrameJam.

Archivos en este manual

• references/story.md: arcos, roles de fotograma, tipos de gancho, formas de línea probadas para cada rol, reglas de VO.
• references/shots.md: formas de toma para fotogramas de lanzamiento, reglas de diseño y movimiento, costuras, una lista de tomas trabajada.
• references/assets.md: grabación de la aplicación, captura de un sitio, la lista de activos, derechos.
• references/music.md: cuadrícula de ritmo, formato cues.json, uso de tu propia pista.
• references/hyperframes.md: empezar desde cero en Hyperframes, ventanas de producto, video y audio, errores comunes.
• references/example-notion.md: el plan de la demo de lanzamiento de Notion, fotograma por fotograma.
• scripts/launch_bed.py: pista musical local gratuita y efectos de sonido a partir de una hoja de señales.
• scripts/sheet.sh: hoja de contacto de cualquier render.
• template/hyperframes/: una composición inicial (ayudantes de cuadrícula de ritmo, ventana de producto, línea cinética, chip, tarjeta de CTA).