video-formato-corto

Video en Formato Corto

Ingeniería de un video 9:16 que sobrevive al deslizamiento. El formato corto no es un pequeño video de lanzamiento, es una máquina de retención: un gancho que se gana el primer segundo, interrupciones de patrón que reajustan la atención cada pocos segundos, y a menudo un bucle que compra tiempo de visualización más allá del 100%. La habilidad está en el ritmo, no en el pulido.

Cuándo usarlo

• Reels / TikTok / YouTube Shorts (7–60s, vertical 9:16).
• Edición de retención: corregir caídas, agregar interrupciones de patrón, ajustar el ritmo.
• Ganchos, bucles sin costura, plantillas reutilizables de formato corto (un diseño, muchos temas).

Estructura narrativa (el contrato de retención)

La narración en formato corto es un contrato con el pulgar del espectador: cada segundo debe re-ganarse el siguiente. La narrativa se moldea hacia atrás desde la curva de retención, no hacia adelante desde una introducción. Bloquea estos elementos antes de tocar la línea de tiempo.

• Una idea por video. Un corto contiene exactamente un remate. Una segunda idea divide la atención y la curva se hunde en el medio — conviértelo en un segundo video. Si no puedes nombrar la única conclusión en una frase, aún no tienes un corto.
• Abre un bucle en los primeros ~3s, ciérralo al final. El gancho plantea una pregunta o vacío (el bucle abierto); el remate lo responde. El espectador se queda porque el bucle está abierto — así que nunca lo respondas temprano y nunca entierres el remate debajo de la configuración.
• Sin silencio muerto. Cada compás avanza la idea o reajusta la atención. Corta todo lo que no haga ninguna de las dos cosas. El silencio, las rampas lentas, las introducciones farragosas ("hey chicos, en este video…") son donde los espectadores se deslizan.
• Por qué la curva, no el corte, es la unidad de trabajo. El algoritmo distribuye lo que mantiene la curva de retención por segundo plana; un "buen" montaje que aplana la curva pierde frente a uno feo que la mantiene arriba. Estás editando la curva, y el gancho condiciona todo lo que viene después — arréglalo primero.

La columna vertebral narrativa (el arco Gancho → Configuración → Cuerpo → Remate/Bucle está presupuestado en la tabla a continuación):

Movimiento	Trabajo narrativo	Fallo si se omite
Gancho	Abrir el bucle; prometer el remate	Deslizar en los primeros 3s
Mantenimiento de tensión	Mantener el vacío abierto a través del cuerpo	Mitad plana, caída media
Remate	Cerrar el bucle — la única idea, entregada	"Perdí mi tiempo", sin compartir
Bucle / CTA	Retroalimentar al fotograma 0, o una petición clara	Sin re-visión, sin acción

(La tabla curva de retención a continuación asigna segundos a cada movimiento; esta sección es la lógica narrativa y el orden detrás de ella. La gramática del gancho enumera los arquetipos de gancho.)

La única métrica que lo impulsa todo

Retención, no valor de producción. El algoritmo distribuye lo que mantiene a los espectadores; ~87% deciden quedarse o deslizar en los primeros 3 segundos, y el umbral para la distribución se sitúa cerca del 70%+ de visualización promedio (Shorts ~73%, TikTok ~78%, Reels ~65%). Cada decisión a continuación se intercambia con esa curva. Una toma impecable que aburre a los 0:04 pierde frente a una fea que retiene.

El arco de retención

Compás	Trabajo	Presupuesto (de un corto de 20s)
Gancho (0–1s)	Un fotograma + una línea que crea un bucle abierto	0–1s
Configuración	Remunerar por qué mirar — promesa, apuestas o el vacío	1–4s
Cuerpo	Entregar valor en compases; una idea por compás	4–17s
Remate / bucle	Cerrar el bucle — o retroalimentarlo al fotograma 0	17–20s

Escala el cuerpo, nunca el gancho. Un corto de 60s tiene un cuerpo más largo y más compases — el mismo gancho de 1 segundo.

Gramática del gancho (primer ~1s)

El gancho es una frase + un visual que abre un vacío de curiosidad que el cerebro necesita cerrar. Elige un patrón y comprométete:

Tipo de gancho	Forma	Mejor para
Bucle abierto	"La razón por la que tu X sigue Y…" (respuesta retrasada)	la mayoría del contenido
Promesa directa	"3 formas de ___ en 30 segundos"	educativo / lista
Interrupción de patrón	snap-zoom / whip-pan / desajuste visual en el fotograma 1	entretenimiento
Negación	"Deja de hacer ___" / "Estás ___ mal"	opiniones contundentes

Dos reglas: la línea del gancho aparece en pantalla como texto en el fotograma 1 (el 85% mira en silencio), y el visual más impactante es también el primer fotograma — nunca una rampa lenta de entrada. Mantén un fotograma inicial fuerte; no fundas desde negro.

Interrupciones de patrón y ritmo de corte

Una interrupción de patrón es cualquier cambio que reajusta la atención: un corte duro, zoom de golpe, inserción de b-roll, efecto de sonido, pop de texto o cambio de ángulo. En formato corto, la densidad es alta — un cambio visual cada ~2–4 segundos; los videos con una interrupción aproximadamente cada 4s retienen ~58% vs ~41% para una cabeza parlante estática. El asesino es un medio plano: TikTok reduce la distribución cuando la curva de visualización se aplana, así que nunca cose el cuerpo a partir de tomas de baja energía.

// Conduce cada interrupción desde el FOTOGRAMA, no desde el reloj de pared — renderiza deterministicamente.
import { useCurrentFrame } from "remotion";
const fps = 30;
const cuts = [0, 1.2, 3.0, 5.4, 8.0, 11.2, 14.0]; // segundos — desiguales a propósito
const frame = useCurrentFrame();
const shot = cuts.findIndex((t, i) => frame < (cuts[i + 1] ?? Infinity) * fps);

Varía el intervalo — un metrónomo se lee como aburrimiento; los cortes desiguales se leen como impulso. Un zoom de golpe es la interrupción más barata que no necesita nuevo material:

import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
const PunchIn = ({ at, children }) => {
  const frame = useCurrentFrame(); const { fps } = useVideoConfig();
  const s = spring({ frame: frame - at * fps, fps, config: { damping: 12, stiffness: 200 } });
  const scale = interpolate(s, [0, 1], [1, 1.12]); // snap al 112% en el compás
  return <div style={{ transform: `scale(${scale})`, transformOrigin: "50% 45%" }}>{children}</div>;
};

Subtítulos

La mayoría de los espectadores miran en silencio, así que los subtítulos en pantalla no son opcionales — llevan el contenido y funcionan como una interrupción de patrón cuando cada frase aparece. Mantén 4–7 palabras por línea, alto contraste, dentro del área segura. No re-implementes la animación de subtítulos aquí — usa la habilidad caption-animation para la sincronización palabra por palabra, el resaltado de karaoke y el estilo; esta habilidad solo coloca subtítulos en la línea de tiempo de retención y dentro de la zona segura 9:16.

Bucles y re-visión

Un bucle sin costura cuenta cada re-visión como tiempo de visualización fresco — un bucle limpio de 8s visto 3× es un 300% de visualización, la señal más fuerte posible. Dos técnicas: empareja el último fotograma con el primero (misma composición, posición, color) para que el corte sea invisible, y escribe un bucle de frase — redacta el gancho para que el remate retroalimente al fotograma 0 ("…y por eso nunca — " → bucles al inicio). La mejor longitud para la re-visión es ~7–15s.

Áreas seguras 9:16

Compón dentro de la zona segura universal para que la interfaz de la plataforma nunca cubra texto o caras.

Zona	Píxeles (1080×1920)	Evitar
Segura universal (todas las plataformas)	centro 900×1400	cualquier cosa crítica fuera de ella
Superior	mantener libre ~120px	perfil / UI de sonido
Inferior	mantener libre ~320px	subtítulos, CTA, hashtags, barra de audio
Derecha	mantener libre ~120px	rail de me gusta / comentar / compartir

Coloca el texto del gancho y el sujeto clave en el cuadro central de 900×1400. Reserva los ~320px inferiores aunque parezcan vacíos en el editor — ahí es donde la plataforma pinta sus propios subtítulos y botones.

Lista de verificación de salida

• La línea del gancho es texto en pantalla en el fotograma 1; el visual más fuerte es el primer fotograma (sin fundido de entrada).
• Un bucle abierto / promesa establecida en los primeros ~4s.
• Una interrupción de patrón visual cada ~2–4s; intervalos desiguales; sin medio plano.
• Subtítulos presentes (vía caption-animation), 4–7 palabras, dentro del área segura.
• Bucle cerrado — primer/último fotograma emparejado o una frase que retroalimenta al fotograma 0.
• Compuesto dentro del cuadro central 900×1400; 320px inferiores / 120px superiores / 120px derechos mantenidos libres.
• Cada valor animado derivado de useCurrentFrame() — sin temporizadores CSS o de librerías.

Entregar y verificar (fotogramas renderizados → MP4)

Ayudante empaquetado (scripts/): organiza tus fotogramas con scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, luego verifica la codificación con scripts/probe-mp4.sh out.mp4 [WxH] [fps]. Ver scripts/README.md.

El corto se entrega como una composición de Remotion (<Composition> + esquema zod + defaultProps) — cada corte, zoom de golpe e interrupción impulsado por useCurrentFrame(), nunca Date.now() / Math.random() / temporizadores. Entregable = out/*.mp4 + el proyecto (re-renderizar por tema). 9:16 vertical (1080×1920) es el predeterminado.

Bucle de verificación — renderizar fotogramas → inspeccionar → codificar. Tres fotogramas prueban las tres cosas que hacen o rompen la retención: el gancho, el ritmo y la costura del bucle.

# Fotogramas en gancho / medio del cuerpo / último fotograma — CON PROPS ENTREGADAS (el tema real, no los valores predeterminados)
npx remotion still Short out/f-hook.png --frame=10  --props='{"topic":"...","hook":"..."}'   # ~primeros 3s se leen al instante
npx remotion still Short out/f-mid.png  --frame=N   --props='{"topic":"...","hook":"..."}'
npx remotion still Short out/f-end.png  --frame=L   --props='{"topic":"...","hook":"..."}'   # L = durationInFrames-1

# Inspeccionar cada PNG:
#  - Fotograma GANCHO (~fotograma 0 / primeros 3s): la línea del gancho es texto en pantalla y se lee al instante; el visual más fuerte ya está presente (sin fundido de entrada)
#  - Costura del BUCLE: comparar f-hook(fotograma 0) vs f-end(último fotograma) — misma composición/posición/color para un corte de bucle invisible
#  - Área segura 9:16: gancho + sujeto clave dentro del cuadro central 900x1400; libre del ~12% superior, ~20-35% inferior (subtítulos/CTA/audio), rail de acción derecha

npx remotion render Short out/short.mp4 --props='{"topic":"...","hook":"..."}'   # codificar una vez que los fotogramas se verifiquen
npx remotion render Short out/demo.gif --codec=gif                                # clip de prueba para README

Por tema / lote: verifica UN tema a través de fotogramas antes de renderizar todos. Usa npx remotion compositions para durationInFrames/fps y elegir los fotogramas medio y último.

Antes de terminar:

1. Los fotogramas se renderizan limpios en el gancho, medio y último fotograma — sin errores.
2. El fotograma del gancho se lee al instante (texto en pantalla + visual más fuerte al frente, sin fundido de entrada); el primer vs último fotograma coinciden para una costura de bucle limpia.
3. Gancho + sujeto + subtítulos están dentro del cuadro seguro central 9:16 de 900×1400 en cada fotograma verificado.
4. Solo impulsado por fotogramas — sin Date.now() / Math.random() / temporizadores; cortes desiguales, sin medio plano.
5. Las props entregadas de un tema real (no defaultProps) se renderizan correctamente; MP4 codificado, GIF opcional.

Archivos de referencia

• references/retention-pacing.md — una composición <Short> de Remotion completa y ejecutable: un programador de tomas impulsado por fotogramas con cortes desiguales, la interrupción de patrón PunchIn, un gancho en pantalla, una superposición de área segura 9:16 y un bucle sin costura de primer/último fotograma. Además, una biblioteca de patrones de gancho, un método de depuración de la curva de retención, mapas de zona segura por plataforma y el patrón de renderizado por lote de plantilla×tema.