Motion graphics con Opus 5.5

Prepárame un estudio de motion graphics en esta carpeta. Yo no programo: instala todo y dime qué hacer solo cuando haga falta algo mío.

1. Revisa qué tengo instalado (Node 22 o más nuevo, ffmpeg) y dime qué falta. Instala lo que falte con el gestor que corresponda a mi sistema, explicándome cada comando antes de correrlo.
2. Corre npx hyperframes doctor y dime si todo está bien. Si algo falla, arréglalo.
3. Instala las skills de Hyperframes con npx hyperframes skills update.
4. Instala las skills de Remotion con npx skills add remotion-dev/skills.
5. Si el plugin de Brag no está, dime que lo instale yo con los dos comandos de /plugin, porque esos se escriben dentro de Claude Code y no los puedes correr tú.

Al final, dime en tres líneas qué quedó instalado y qué comando uso para empezar un video con cada herramienta.

vamos a /brag este proyecto

Vamos a /brag este proyecto. Formato vertical, 20 segundos.

Antes de construir nada, enséñame brag-plan.md con el ángulo, el gancho, los 2 o 3 momentos que se van a mostrar, el remate y el storyboard escena por escena. Espera mi visto bueno. Si algo no me gusta, lo cambiamos y solo entonces construyes y renderizas.

/brag --tone "lanzamiento falso de una Serie A de 2016"

/brag --tone "pieza de museo, con ficha técnica y silencio entre salas"

/brag --tone "anuncio sobreproducido de un juego móvil"

/brag [URL DEL PRODUCTO] --format vertical --duration 20 --tone [polished, yc-parody, el que quieras]

Reglas para este video:
- Entra al sitio, usa capturas reales, el logo real, los colores y las tipografías reales. Guarda lo que descargues en la carpeta de trabajo y enséñame la lista antes de animar.
- Nunca redibujes la interfaz del producto de memoria: recorta y anima la real.
- Estructura: gancho de máximo 5 palabras con la tipografía enorme, aparece el producto y la interfaz se arma pieza por pieza, tres funciones cada una como un momento real de uso, [UNA CIFRA REAL del sitio] y el cierre con el logo y [LLAMADA A LA ACCIÓN].
- Música original, y efectos suaves por debajo de la música.

Antes de construir, enséñame brag-plan.md y espera mi visto bueno. Al final, genera también las versiones cuadrada y horizontal.

/brag --full --voice --format vertical --tone polished

Escribe una narración corta, natural y específica de este producto. Que complemente lo que se ve en pantalla y no lea el texto que ya está escrito. Que cada frase caiga en su escena y que el ritmo no se pase de 25 segundos. Enséñame el guion de la voz junto con el plan antes de renderizar.

Referencia: ./refs/lanzamiento.mp4 (y ./refs/frames/*.png)

1. Extrae un frame cada 0.5 s con ffmpeg y estúdialos.
2. Escribe ./docs/style_guide.md: duración típica de las tomas, tipos de transición, movimientos de cámara, textura y grano, tipografía (peso, espaciado) y cómo entra y sale el texto. Toma la gramática de la referencia, nunca su contenido, logos ni personajes.
3. Enséñame el archivo y espera mi visto bueno.
4. Cuando lo apruebe, corre /brag con esa guía como dirección de tono: el ritmo y los cortes salen de style_guide.md, y los colores, tipografías y recursos salen de mi proyecto.

Usando /hyperframes, convierte ./notas.md en un video pitch de 45 segundos con subtítulos animados. Vertical, 9:16.

1. Léelas y dime en una frase cuál es el mensaje central. Si hay más de uno, elige el más fuerte.
2. Escribe docs/shotlist.md con cada toma, su duración, el texto que aparece y el movimiento. Enséñamela y espera mi visto bueno.
3. Construye la composición, corre npx hyperframes check y arregla todo lo que reporte (incluido el contraste del texto).
4. Abre la vista previa con npx hyperframes preview y dame el enlace local para verla antes de renderizar.

Usando /remotion-create, quiero una plantilla de video vertical de 12 segundos para [TIPO DE VIDEO: por ejemplo la cifra de la semana, un producto del catálogo, una frase del día].

1. La plantilla recibe estos datos: [LISTA: título, cifra, texto corto, imagen]. Con ellos arma el video completo; nada de texto escrito a mano dentro de la animación.
2. Un solo color de acento, una tipografía de display y una de lectura. Los resortes con un rebote mínimo.
3. Crea un archivo datos.csv con 3 filas de ejemplo y renderiza un video por fila en la carpeta out/.
4. Enséñame una hoja de contacto de uno de los tres videos antes de seguir con más filas.
5. Dime cuánto tarda cada render, para saber cuántos puedo hacer de una sola vez.

Herramienta: [/hyperframes o /remotion-create].

<datos>
Pídeme: mi producto y su URL, de 8 a 12 estados de la interfaz que cuenten su historia, los datos reales que se ven en cada estado, colores y tipografías de la marca más un acento, una pista libre de derechos cerca de 120 BPM, y los formatos.
</datos>

<direccion>
Movimiento de interfaz estilo película de producto. Un contenedor que nunca se corta: cada estado es el mismo elemento cambiando de tamaño, radio y relleno mientras su contenido cambia detrás de un desenfoque corto. Un cursor dispara cada cambio. Lienzo neutro cálido y un solo acento. Resortes con apenas un poco de rebote.
Prohibido: easing rebotón, brillos, degradados en la interfaz, explosiones de partículas, tiempo muerto.
</direccion>

<estructura>
120 BPM, 8 compases, algo pasa en cada beat.
logo, botón de llamada a la acción, campo de correo (se escribe), cargador, palomita de éxito, tarjeta de panel, la gráfica se dibuja sola, tooltip al pasar el cursor, paleta de comandos, aviso, logo.
</estructura>

<construccion>
1. Todo es función pura del tiempo: sin timers, sin transiciones que corran solas, sin estado que pase entre frames.
2. Resortes de forma cerrada. Un valor con varios destinos es la suma de un resorte por cada cambio, nunca un resorte que se reinicia.
3. El texto dentro de un contenedor que se transforma entra después de que empieza el cambio y sale antes del siguiente.
4. Los indicadores de pestañas: el borde de adelante y el de atrás con resortes distintos, para que se estiren.
5. Cuadrícula de tiempos desde la pista. Empieza en un tiempo fuerte. Los sonidos de interfaz van sobre los picos medidos.
6. Render a 30 cuadros por segundo, o 60 si la herramienta lo permite sin que se arrastre.
</construccion>

<trampas>
Nunca uses will-change en nada que la cámara escale (el texto se ve borroso).
El último frame tiene que ser igual al primero, con la posición y la velocidad del cursor incluidas.
</trampas>

<empezar>
Pídeme los datos y luego enséñame la lista de estados sobre la cuadrícula de tiempos antes de escribir código.
</empezar>

Reemplaza cada curva de easing de esta composición por resortes (spring() si es Remotion; si es Hyperframes, una función de resorte que alimente a GSAP). Rebote mínimo en la interfaz, ninguno en la tipografía. Cualquier valor con más de un destino suma un resorte por cada cambio. Los botones y bordes de ataque con el perfil seco; las tarjetas y la cámara, con el estándar; la tipografía grande y los logos, con el pesado.

Al terminar, renderiza 3 segundos y dime qué cambió en la sensación del movimiento.

Mi canción está en ./audio/track.mp3. Úsala sin modificarla.

1. Detecta su ritmo con un detector real (no a ojo) y dime el BPM que mediste y el segundo del primer tiempo fuerte.
2. Reacomoda la lista de tomas para que cada cambio de estado caiga en un beat y los momentos grandes en un tiempo fuerte. Empieza el video en un tiempo fuerte.
3. Pon los efectos de sonido (clics, pops, whooshes) sobre los golpes medidos, suaves y por debajo de la música.
4. Mezcla todo, normaliza a -14 LUFS y entrégame el video final. Si la herramienta no puede medir el ritmo de verdad, dímelo en vez de inventar una sincronía.

Eres el director, animador, diseñador de sonido e ingeniero de render de una película de [DURACIÓN] hecha en código con [/hyperframes o /remotion-create]. Trátalo como una producción de varias sesiones. No corras al render final.

## La película en una línea
[LOGLINE. Qué debe sentir quien la ve al terminar.]

## Referencias y recursos
- ./refs/ : [video / frames / biblioteca de imágenes]. Toma la gramática, nunca el contenido.
- ./audio/track.mp3 : úsala sin modificarla. Mide primero su ritmo con un detector real.
- Llaves de servicios en .env: [NOMBRE DE LAS VARIABLES]. Presupuesto: [$X]. Sé económico.

## Look
[3 a 5 líneas: paleta, tipografía, textura, lenguaje de cámara. Looks prohibidos.]

## Hoja de beats
0:00-0:02  gancho: [la imagen más llamativa]
0:02-0:10  [acto 1]
...        una recompensa visual nueva cada 3 a 5 segundos
[FINAL]    el último frame prepara el primero (loop)

## Proceso, con puertas
1. Escribe docs/style_guide.md y docs/shotlist.md (cada toma: frames, cámara, texto, efectos). Enséñame la lista. Si no contesto en 10 minutos, sigue.
2. Construye imágenes fijas de cada toma. Hoja de contacto. Crítica.
3. Animática a 960x540 con audio provisional. Arregla el ritmo antes de pulir.
4. Animación completa, pasada de pulido, pasada de sonido y render final.
5. Reparte el trabajo en subagentes por capítulo. Escribe antes docs/ANIMATION_GUIDE.md para que todos trabajen con el mismo estilo, y deja docs/STORYBOARD.md.

## Bucle de crítica (cada toma, mínimo 3 rondas)
Renderiza de 3 a 5 fotos fijas y califícalas del 1 al 10 en: gancho, lectura a 360 px de ancho, movimiento, composición, profundidad, sincronía con el sonido, acabado. Anota las notas y los 3 problemas más grandes en docs/review_log.md. Arregla. Repite hasta que todo sea 8 o más.

## Entregables
out/final.mp4 · out/loop_check.mp4 · out/poster.png · out/contact.png · README.md

Con ffmpeg, genera a partir de out/final.mp4 estas cuatro imágenes y mira las tres primeras bien: una hoja de contacto (2 frames por segundo, 6 de ancho), una prueba de teléfono (1 frame por segundo a 360 px de ancho), una tira de 12 frames seguidos alrededor de [SEGUNDO DE LA ACCIÓN MÁS RÁPIDA], y el video repetido dos veces para revisar la costura del loop. Sé un director de motion exigente, no un autor orgulloso.

Califica del 1 al 10: gancho en los primeros 2 s · lectura a tamaño de teléfono · calidad del movimiento (resortes, sin frames muertos) · variedad (algo nuevo cada 2 a 4 s) · composición · fidelidad a la marca · sincronía con el sonido.

Dame los 3 problemas más grandes con su segundo exacto. Busca en especial: texto encimado durante los cambios, cosas que se deslizan en vez de suavizarse, etiquetas en las esquinas y marcos, tomas con texto centrado sobre degradado, texto escalado y borroso, un beat muerto en el que no pasa nada y un salto en la costura del loop.

Arréglalos, vuelve a renderizar solo los segundos afectados, enséñame la nueva hoja de contacto y las nuevas notas.

Convierte las escenas de esta composición para que se escriban contra una función de layout (ancho y alto como parámetros) en vez de píxeles fijos. Después renderiza el video en 9:16, 1:1 y 16:9 desde la misma línea de tiempo.

Reencuadra el texto y la interfaz para cada formato; no recortes el horizontal para sacar el vertical. Al terminar, genera una hoja de contacto de cada formato y dime cuál quedó más débil.

Tengo un archivo SKILL.md de una skill llamada motion-reel. Instálala para que Claude Code la encuentre: crea la carpeta correcta dentro de mi carpeta de skills y copia ahí el archivo. Dime la ruta exacta donde quedó.

Después pruébala con esta frase: usa motion-reel para [URL], 20 segundos, vertical. Pídeme los datos que falten, todos juntos, y no sigas hasta que te los dé.