motion-reel

¿Qué hace motion-reel?

Genera un MP4 de 1920×1080 a 30 fps en el estilo editorial motion-reel. El motor listo está en template/. Se copia, se escribe un archivo de configuración (src/reel.config.ts), se renderiza, se revisan los frames y se envía el video.

Argumentos: $ARGUMENTS

1. Leer la solicitud

A partir de los argumentos y la conversación, determinar:

• Tema: qué producto o característica. Si estás dentro de su código fuente, lee el texto real (archivos i18n, componentes de página, README) para que el video muestre lo que el producto realmente hace.
• Colores:
  • Un nombre de predefinido: lime (el aspecto de referencia), coral, ocean, sunset, violet, night (oscuro).
  • O valores hex, asignados a accent (resaltador, el color que resalta), luego secondary (segundo color de marca), luego opcionalmente paper (fondo) y ink (texto).
  • Un solo color significa que es el acento.
  • Si el proyecto tiene tokens de marca (por ejemplo globals.css), ofrécelos como secondary.
  • Si no se da nada: usar lime e indicarlo en el mensaje final.
• Idioma del texto: coincidir con el del usuario (indonesio por defecto si escriben en indonesio).
• Carpeta de salida: el scratchpad de la sesión, a menos que el usuario nombre una carpeta. Nunca colocarlo dentro del repositorio del producto a menos que lo pida.

Preguntar solo cuando el tema en sí no esté claro. Los colores y la duración tienen valores predeterminados.

2. Configurar

cp -r "<directorio de esta skill>/template" "<salida>/reel"
cd "<salida>/reel" && npm install && npm run sfx

• npm install tarda unos 2 minutos. Ejecútalo en segundo plano si hay otro trabajo que hacer.
• Si el producto tiene un logo, cópialo en public/ y establece brand.logo con su nombre de archivo. De lo contrario, establece brand.initials.

3. Escribir src/reel.config.ts

• Establecer theme: makeTheme(presets.coral) o makeTheme({ accent, secondary, paper, ink }). Todos los demás tokens se derivan automáticamente.
• Elegir escenas. La lista de campos, duraciones predeterminadas y límites de longitud del texto están en references/config.md; léelo antes de escribir el texto.
• Arco recomendado (aproximadamente 45 s): spark → word → tagline → bento → checklist → steps → formula → showcase → stats → kinetic → logo. Elimina las escenas que no se ajusten al producto. Un corte corto (aproximadamente 20 s) es spark → word → tagline → kinetic → logo.
• Hechos: mostrar solo afirmaciones que el producto realmente haga. Nunca inventar métricas como "10,000 usuarios" o "99% de disponibilidad". El contenido de ejemplo (nombres de cuentas, publicaciones de muestra) debe ser inventado y claramente genérico, nunca datos reales de clientes.
• Titulares: title.sans es la declaración y title.serif es el giro en itálica. mark es una palabra de la parte serif que recibe el resaltador.

4. Verificar y renderizar

npx tsc --noEmit
npm run render        # → out/reel.mp4, usa --port=3917
npm run frames        # → out/frames/sheet*.jpg, un frame cada 1.5 s

Leer cada contact sheet. Buscar:

• texto que desborde una tarjeta o el marco
• elementos superpuestos
• una escena que parezca vacía
• un resaltador en la palabra equivocada
• bajo contraste con colores personalizados (por ejemplo, un acento claro sobre un papel claro)

Corregir la configuración, o el motor si es necesario, luego renderizar una vez más. No hacer bucles de renderizado.

5. Entregar

• Enviar out/reel.mp4 con SendUserFile (display: "render").
• Informar duración, tamaño, un resumen de una línea por escena, los colores utilizados y la ruta de configuración para ediciones posteriores.
• Indicar claramente que el audio no se escuchó. Solo se verificaron la sincronización y los niveles.

Reglas de estilo (al extender el motor)

• Roles de paleta: paper fondo, ink texto y píldoras oscuras, accent solo para resaltados y estados activos (nunca texto grande sobre papel), secondary para bloques de color y la palabra de acento del logo.
• Tipografía:
  • Inter Tight 800 para declaraciones.
  • Instrument Serif itálica para el giro.
  • Archivo Black solo para palabras cinéticas.
  • JetBrains Mono de 13 a 20 px con espaciado entre letras para etiquetas y HUD.
• Movimiento:
  • Expo-out bezier(0.16,1,0.3,1) para entradas, in-out bezier(0.65,0,0.35,1) para movimientos.
  • Las salidas se aceleran con desenfoque direccional (Smear).
  • El texto aparece desde una máscara (overflow: hidden + translateY).
  • Los números giran con desenfoque vertical (Roll).
• Transiciones: desenfoque de salida/entrada, oscurecimiento a tinta después de un tagline, zoom-blur a través, una tarjeta de acento expandiéndose a pantalla completa antes del bloque cinético y cortes duros entre palabras cinéticas. Sin vibración, sin destellos blancos.
• HUD: etiqueta arriba a la izquierda, código de tiempo arriba a la derecha, etiqueta de sección más línea de progreso abajo a la izquierda, resolución abajo a la derecha, soportes de esquina. Cambia a texto claro sobre bloques de color oscuros.
• Cada escena mantiene texto legible durante al menos 1.5 s.

Errores comunes de Remotion (aprendidos por las malas)

• Todo el movimiento proviene de useCurrentFrame(). Las transiciones y animaciones CSS no se renderizan.
• El puerto 3000 suele estar ocupado por un servidor de desarrollo. Siempre pasar --port.
• El ffmpeg incluido en Remotion carece de los filtros fps y tile. Obtener frames con -ss uno a la vez (scripts/frames.mjs hace esto).
• React.useId() contiene dos puntos. Sanitizarlo antes de usarlo en url(#id).
• Desenfoque direccional: SVG feGaussianBlur stdDeviation="x y". CSS blur() solo es uniforme.
• Audio: un <Sequence from> + <Html5Audio> por señal, con durationInFrames establecido en la duración del clip.
• color-mix() y clip-path: circle() funcionan en el Chrome de Remotion.