Formateador de Video para Redes Sociales

¿Qué hace Formateador de Video para Redes Sociales?

Tomas un video que ya es correcto - la historia, el movimiento y la marca están hechos - y haces que aterrice en el feed. Ese es un trabajo diferente a crearlo. Una demostración horizontal que se ve genial en una computadora portátil muere en un feed vertical: se convierte en una tira con letterboxing, el subtítulo se coloca debajo de un botón de la interfaz de usuario, el primer fotograma es negro y no tiene bucle. Este skill soluciona estos cinco problemas, por plataforma, y emite las especificaciones exactas que necesita el paquete de mecánicas.

Esta es la capa de gusto. Se empareja con el paquete remotion-video-production: tú decides el reencuadre, las áreas seguras, el estilo de subtítulos y el bucle aquí, luego entregas una especificación concreta a remotion-compose (para crear el nuevo ancho/alto del <Composition> e incrustar subtítulos) y a remotion-render (para exportar por plataforma). No escribas código de composición ni ejecutes renders aquí - nombra la especificación y difiere la ejecución.

Activa rápidamente ante cualquier solicitud de reencuadrar, redimensionar, recortar, verticalizar, subtitular o "formatear / exportar para redes sociales", o una plataforma nombrada (TikTok, Reels, Shorts, X/Twitter, LinkedIn), incluso solo "haz que esto funcione en móvil".

Flujo de Trabajo

Ejecuta estos pasos en orden. Reencuadra antes que los subtítulos (el área segura de los subtítulos depende de la nueva relación de aspecto), y diseña el primer fotograma y el bucle antes de pasar el trabajo a renderizado.

Paso 1 - Establecer las plataformas objetivo y obtener sus especificaciones

Pregunta qué plataformas se van a publicar, luego obtén las restricciones estrictas de cada una de la tabla en references/platform-specs. Necesitas cuatro números por plataforma: relación de aspecto, resolución, duración máxima y los márgenes del área segura (la banda de píxeles que la plataforma cubre con su propia interfaz de usuario - nombre de usuario, subtítulo, carril de acciones, barra de progreso). Nunca adivines estos valores; un subtítulo dentro del hueco del carril de acciones es invisible en el dispositivo y se ve bien en la vista previa. Un video fuente generalmente se ramifica en dos o tres exportaciones (por ejemplo, un master 9:16 para TikTok/Reels/Shorts más otro 1:1 o 16:9 para LinkedIn/X).

Paso 2 - Elegir la estrategia de reencuadre (9:16 ↔ 16:9)

El recorte cambia qué píxeles sobreviven, por lo que el sujeto debe permanecer dentro del nuevo encuadre. Elige una estrategia por exportación - consulta references/reframe-strategies:

• Re-diseño (mejor). No recortes los píxeles del 16:9 en absoluto: re-crea la escena para el nuevo lienzo: apila lo que estaba lado a lado, agranda el texto, mueve al sujeto al centro vertical. Esto es un cambio en remotion-compose (nuevo ancho/alto, mismo contenido), y siempre supera a un recorte. Entrega las dimensiones objetivo.
• Recorte centrado. Mantén la columna central de un encuadre 16:9 para 9:16. Rápido, pero descarta los tercios exteriores - solo es seguro cuando el sujeto está centrado.
• Relleno con desenfoque. Ajusta todo el encuadre 16:9 en 9:16 con una copia desenfocada y escalada que llena la parte superior/inferior. Aceptable para videos de cabezas parlantes o grabaciones de pantalla; se ve perezoso en piezas de diseño de movimiento.
• Recorte con seguimiento. Recorta al sujeto y mueve la ventana de recorte a lo largo del tiempo para seguir la acción. El resultado más fuerte, pero el que más trabajo requiere; especifica los fotogramas clave para remotion-compose.

Ir de 9:16 → 16:9 es la misma lógica a la inversa: re-diseña para usar el nuevo espacio horizontal en lugar de crear barras laterales pillarboxing en un clip vertical dentro de una tira horizontal.

Paso 3 - Mapear las áreas seguras en el nuevo encuadre

Para cada exportación, superpón los márgenes de área segura de la plataforma y mantén todos los elementos esenciales - subtítulos, logotipo, CTA, sujeto clave - dentro del rectángulo seguro. Los huecos derecho/inferior (carril de acción + bloque de subtítulos) son los asesinos habituales en 9:16. Ejecuta safe_area.js (abajo) para convertir los márgenes porcentuales en cajas de píxeles para tu resolución exacta, luego pasa esos números a remotion-compose como los límites del diseño. Trata la banda no segura como fuera de los límites para cualquier cosa que deba leerse.

Paso 4 - Diseñar el primer fotograma nativo de la plataforma

El primer fotograma es la miniatura y el que detiene el desplazamiento; la reproducción automática comienza sin sonido, por lo que el fotograma 0 debe tener significado sin audio. No abras en negro, en una animación de logotipo, ni a mitad de un fundido. Abre con un gancho legible: el resultado final, una línea de subtítulo en negrita, o el sujeto ya en pantalla. Esto es una edición de remotion-compose en la escena de introducción (o un gancho agregado de 1-2s). Especifica exactamente lo que muestra el fotograma 0.

Paso 5 - Especificar subtítulos incrustados

Asume reproducción sin sonido: los subtítulos son obligatorios, no opcionales, y deben estar incrustados (renderizados en los píxeles), porque los archivos .srt adjuntos son inconsistentes y no se pueden estilizar entre plataformas. Especifica, para remotion-compose: posición (dentro del área segura, típicamente el tercio inferior pero por encima del hueco del bloque de subtítulos), estilo (grande, alto contraste, seminegrita, con un borde o fondo sólido para legibilidad sobre cualquier fondo), sincronización (bloques a nivel de frase sincronizados con el habla, no un muro de texto), y nunca más de ~2 líneas en pantalla. Para subtítulos animados palabra por palabra, difiere el diseño de movimiento a kinetic-typography y solo nombra la caja del área segura y la sincronización aquí.

Paso 6 - Diseñar el bucle

Los feeds reproducen los clips instantáneamente, por lo que un bucle limpio multiplica el tiempo de visualización. Decide uno:

• Bucle sin costura - el último fotograma coincide con el primero (misma composición, posición, color) para que la repetición sea invisible. Mejor para bucles cortos ambientales/de marca.
• Bucle con gancho de retorno - termina en una línea que envía al espectador de vuelta al inicio ("...y ese es el paso uno"), haciendo que la revisión sea intencional.
• Parada definitiva - una tarjeta final de CTA definitiva; correcta para piezas narrativas más largas donde un bucle se sentiría extraño.

Para un bucle sin costura, la apertura y el cierre son una restricción de remotion-compose (coincidir el fotograma 0 y el último fotograma). Nombra el tipo de bucle y los fotogramas coincidentes.

Paso 7 - Emitir la especificación de exportación y entregar

Completa la plantilla export-spec a continuación - un bloque por plataforma. Esa especificación es el briefing para el paquete de mecánicas: remotion-compose crea un <Composition> por relación de aspecto con el diseño del área segura, el primer fotograma y los subtítulos incrustados; luego remotion-render exporta cada uno (una exportación 9:16 es un Composition creado a 1080×1920, según el preset vertical de remotion-render). No renderices aquí - entrega la especificación.

Barra de calidad

Una exportación es A+ solo cuando se cumplen todas:

• Cada exportación de plataforma nombra una relación de aspecto real, resolución, duración máxima Y caja de área segura - obtenida de la tabla de especificaciones, nunca adivinada.
• Ningún elemento esencial (subtítulo, logotipo, CTA, sujeto) se encuentra en un hueco no seguro en ninguna plataforma objetivo; verificado contra las cajas de safe_area.js.
• El reencuadre es un re-diseño o un recorte con seguimiento donde el sujeto se perdería de otra manera - no un recorte centrado ciego o un relleno con desenfoque perezoso en una pieza de movimiento.
• El fotograma 0 se lee sin sonido: un gancho, resultado o sujeto - nunca negro, nunca un logotipo simple, nunca a mitad de un fundido.
• Los subtítulos están incrustados, dentro del área segura, divididos en frases, ≤2 líneas, alto contraste.
• El tipo de bucle se elige a propósito, y los fotogramas primero/último de un bucle sin costura se especifican para que coincidan.
• La salida es una especificación entregada a remotion-compose / remotion-render - este skill no creó código de composición ni ejecutó ningún render.

NO HAGAS

• NO inicies el proyecto, escribas código de composición ni ejecutes el render aquí - nombra la especificación y difiere a remotion-setup / remotion-compose / remotion-render.
• NO recortes al centro una fuente 16:9 a 9:16 cuando el sujeto está descentrado; recortarás al sujeto. Haz re-diseño o seguimiento en su lugar.
• NO coloques subtítulos, CTA o logotipos en los huecos derecho/inferior donde el carril de acciones y el bloque de subtítulos de la plataforma los cubren.
• NO confíes en subtítulos .srt/.vtt adjuntos para redes sociales; incrústalos en los píxeles para que siempre se rendericen y tú controles el estilo.
• NO abras en negro, una animación de logotipo o un fundido - el fotograma 0 es la miniatura.
• NO envíes un solo archivo 16:9 a cada plataforma; los feeds verticales lo convierten en una tira con letterboxing. Exporta por relación de aspecto.
• NO excedas la duración máxima de una plataforma esperando que "aún se publique" - se trunca o rechaza; recorta al límite en el corte.
• NO diseñes animación de subtítulos palabra por palabra aquí - eso es kinetic-typography; solo especifica la caja segura y la sincronización.
• NO planifiques el storyboard o el orden de tomas aquí - si el video aún no existe, eso es video-storyboard; este skill reencuadra un video que ya está editado.
• NO ajustes cómo se mueven los elementos (curvas de aceleración, espaciado, seguimiento) aquí - eso es motion-design-principles; este skill solo nombra el nuevo lienzo y los límites.
• NO selecciones la paleta, el contraste o la iluminación para el reencuadre aquí - difiere esas elecciones a motion-color-and-light.
• NO dirijas el contenido de la demostración del producto o la coreografía de pantalla aquí - eso es product-demo-director; este skill asume que el contenido está bloqueado.
• NO diseñes la partitura, la sincronización del ritmo o el sonido aquí - los subtítulos asumen reproducción automática sin sonido, pero el audio es trabajo de sound-and-music-sync.

Habilidades relacionadas

Esta es una habilidad artesanal en un paquete de video; difiere a un hermano cuando la solicitud realmente trata sobre su ámbito, y entrega la especificación de formato a las habilidades mecánicas:

• video-storyboard - planificar los ritmos y el orden de las tomas antes de que exista un video. Viene antes de esta habilidad.
• product-demo-director - dirigir el contenido de la demostración y la coreografía en pantalla.
• motion-design-principles - la artesanía de curvas de aceleración, espaciado y movimiento de la animación; apóyate en ella al rediseñar un encuadre para una nueva relación de aspecto.
• motion-color-and-light - decisiones de paleta, contraste e iluminación.
• kinetic-typography - movimiento de subtítulos animado palabra por palabra (tú nombres la caja segura y la sincronización; ello diseña la animación).
• sound-and-music-sync - partitura y sincronización del ritmo; la capa de audio que esta habilidad deliberadamente no toca.
• remotion-compose / remotion-render - las mecánicas que consumen la especificación de exportación de esta habilidad para crear el <Composition> por relación de aspecto y exportar el MP4.

Calculadora

Script Node.js autocontenido. Guárdalo como safe_area.js y ejecútalo con node safe_area.js. Convierte los márgenes porcentuales del área segura de cada plataforma en cajas de píxeles para la resolución de esa plataforma, para que puedas entregar límites de diseño exactos a remotion-compose. Sin dependencias. Edita el bloque platforms a medida que cambien las especificaciones.

// Calculadora de área segura para redes sociales. Ejecutar: node safe_area.js
// Los márgenes son el % de cada borde que cubre la interfaz de usuario de la plataforma (superior/derecho/inferior/izquierdo).
// Los márgenes derecho + inferior son grandes en 9:16 debido al carril de acciones y al bloque de subtítulos.
const platforms = [
  { name: 'TikTok',         w: 1080, h: 1920, top: 6,  right: 11, bottom: 17, left: 3 },
  { name: 'Reels',          w: 1080, h: 1920, top: 7,  right: 12, bottom: 18, left: 3 },
  { name: 'Shorts',         w: 1080, h: 1920, top: 5,  right: 12, bottom: 13, left: 3 },
  { name: 'X (in-feed)',    w: 1080, h: 1080, top: 4,  right: 4,  bottom: 12, left: 4 },
  { name: 'LinkedIn',       w: 1080, h: 1350, top: 4,  right: 4,  bottom: 10, left: 4 },
]

function box(p) {
  const insetX = (pct) => Math.round((pct / 100) * p.w)
  const insetY = (pct) => Math.round((pct / 100) * p.h)
  const x = insetX(p.left)
  const y = insetY(p.top)
  const safeW = p.w - insetX(p.left) - insetX(p.right)
  const safeH = p.h - insetY(p.top) - insetY(p.bottom)
  return { x, y, safeW, safeH }
}

for (const p of platforms) {
  const b = box(p)
  console.log(
    p.name.padEnd(14),
    `${p.w}x${p.h}`.padEnd(11),
    'caja segura -> x:' + String(b.x).padEnd(4),
    'y:' + String(b.y).padEnd(4),
    'w:' + String(b.safeW).padEnd(5),
    'h:' + b.safeH
  )
}

Ejemplo de salida

TikTok         1080x1920   caja segura -> x:32   y:115  w:929   h:1479
Reels          1080x1920   caja segura -> x:32   y:134  w:918   h:1440
Shorts         1080x1920   caja segura -> x:32   y:96   w:918   h:1574
X (in-feed)    1080x1080   caja segura -> x:43   y:43   w:994   h:907
LinkedIn       1080x1350   caja segura -> x:43   y:54   w:994   h:1161

Léelo: en TikTok, diseña cada elemento que debe leerse dentro de x 32→961, y 115→1594. El hueco derecho (el carril de acciones: me gusta, comentar, compartir) consume los últimos ~119px, y la parte inferior (nombre de usuario + subtítulo) consume ~326px - cualquier cosa allí está cubierta en el dispositivo aunque se vea bien en la vista previa de Studio. Pasa estos como los límites de diseño a remotion-compose; en un Composition vertical de 1080×1920, posiciona los subtítulos y el CTA dentro de la caja, no en los bordes del fotograma en bruto.

Plantilla: export-spec

Completa un bloque por plataforma. Este es el briefing que consumen remotion-compose y remotion-render - pega los números del área segura de safe_area.js.

ESPECIFICACIÓN DE EXPORTACIÓN SOCIAL. [COMPLETAR: nombre del video]. Fuente: [COMPLETAR: master 16:9, 1920x1080]

PLATAFORMA: [COMPLETAR: TikTok / Reels / Shorts / X / LinkedIn]
  Relación de aspecto / resolución:   [COMPLETAR: 9:16 / 1080x1920]
  Duración máxima:            [COMPLETAR: ej. <= 60s en feed]
  Caja segura (px):         x:[COMPLETAR] y:[COMPLETAR] w:[COMPLETAR] h:[COMPLETAR]   (de safe_area.js)
  Estrategia de reencuadre:      [COMPLETAR: re-diseño / recorte centrado / relleno con desenfoque / recorte con seguimiento]
    -> remotion-compose: [COMPLETAR: nuevo Composition WxH + notas de diseño / fotogramas clave de recorte]
  Primer fotograma (fotograma 0): [COMPLETAR: el gancho sin sonido mostrado en 0 - nunca negro/logotipo/fundido]
  Subtítulos:              incrustados, [COMPLETAR: posición en la caja segura], <=2 líneas,
                         divididos en frases, [COMPLETAR: estilo - tamaño/contraste/fondo]
  Bucle:                  [COMPLETAR: sin costura / gancho de retorno / parada definitiva]
    -> si es sin costura:      el fotograma 0 coincide con el último fotograma en [COMPLETAR: posición/color]
  Render:                remotion-render [COMPLETAR: preset, ej. 1080x1920 H.264 MP4]

(repite el bloque para cada plataforma objetivo)

references/platform-specs

Verifica contra la documentación actual de creadores de cada plataforma antes de publicar; estas son la forma estable, pero los límites varían. La relación de aspecto y las áreas seguras importan más que la duración máxima exacta.

• TikTok - 9:16, 1080x1920. El punto óptimo en el feed es corto (menos de ~60s), las subidas pueden ser mucho más largas. Carril de acciones derecho pesado y un bloque de subtítulos inferior alto; mantén el contenido que debe leerse arriba y centrado. Cultura con sonido, pero aún así subtitula para accesibilidad y reproducción automática sin sonido.
• Instagram Reels - 9:16, 1080x1920. Hasta ~90s. Interfaz de usuario derecha/inferior similar a TikTok más la fila de perfil/audio en la parte inferior. El recorte en la cuadrícula es 1:1, por lo que el centro también debe leerse como una miniatura cuadrada.
• YouTube Shorts - 9:16, 1080x1920. Hasta 60s (cualquier cosa más larga se divide en partes o no se muestra en el feed). Menos desorden en la interfaz de usuario que TikTok/Reels; el área segura es más generosa, pero el título y los botones aún consumen la parte inferior ~13%.
• X (Twitter) - En el feed es 1:1 (1080×1080) o 16:9. El carril de acciones es menos intrusivo, pero el bloque de subtítulos inferiores puede ser alto. La miniatura se recorta a 1:1, así que centraliza visualmente.
• LinkedIn - Alimentación nativa 16:9 o vertical 4:5 (1080×1350). Interfaz de usuario más limpia, pero el bloque de título/descripción en la parte inferior come ~10%. Prefieren contenido educativo y profesional.