Video de 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, interruptores de patrón que reinician la atención cada pocos segundos y, a menudo, un bucle que compra tiempo de visualización más allá del 100%. El oficio es el ritmo, no el pulido.
Cuándo usarlo
- Reels / TikTok / YouTube Shorts (7–60s, vertical 9:16).
- Edición de retención: corregir caídas, agregar interruptores de patrón, ajustar el ritmo.
- Ganchos, bucles sin fisuras, plantillas de formato corto reutilizables (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 volver a ganarse el siguiente. La narrativa se moldea hacia atrás desde la curva de retención, no hacia adelante desde una introducción. Bloquee estos antes de tocar la línea de tiempo.
- Una idea por video. Un short lleva exactamente un beneficio. Una segunda idea divide la atención y la curva se hunde en el medio — conviértala en un segundo video. Si no puede nombrar la única conclusión en una oración, aún no tiene un short.
- Abra un bucle en los primeros ~3s, ciérrelo al final. El gancho plantea una pregunta o brecha (el bucle abierto); el beneficio la responde. El espectador se queda porque el bucle está abierto — así que nunca lo responda temprano, y nunca entierre el beneficio debajo de la preparación.
- Sin tiempo muerto. Cada latido avanza la idea o reinicia la atención. Corte todo lo que no haga ninguna de las dos cosas. El silencio, las rampas lentas, las introducciones para aclarar la garganta ("oye chicos, en este video…") son donde los espectadores deslizan.
- Por qué la curva, no el corte, es la unidad de trabajo. El algoritmo distribuye cualquier cosa que mantenga plana la curva de retención por segundo; una edición "buena" que aplana la curva pierde frente a una fea que la mantiene arriba. Está editando la curva, y el gancho controla todo lo que viene después — arréglelo primero.
El esqueleto narrativo (el arco Gancho → Preparación → Cuerpo → Beneficio/Bucle está presupuestado en la tabla a continuación):
| Movimiento | Trabajo narrativo | Fracaso si se pierde |
|---|---|---|
| Gancho | Abrir el bucle; prometer el beneficio | Deslizamiento en los primeros 3s |
| Mantenimiento de tensión | Mantener la brecha abierta a través del cuerpo | Medio plano, caída media |
| Beneficio | Cerrar el bucle — la única idea, entregada | "Perdí mi tiempo", sin compartir |
| Bucle / CTA | Retroalimentar al fotograma 0, o una solicitud clara | Sin revisión, sin acción |
(La tabla El arco 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 él. 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 cualquier cosa que retenga a los espectadores; ~87% decide quedarse o deslizar dentro de los 3 segundos, y el umbral para la distribución se sitúa cerca de 70%+ de visualización promedio (Shorts ~73%, TikTok ~78%, Reels ~65%). Cada decisión a continuación se negocia contra esa curva. Una toma impecable que aburre a los 0:04 pierde frente a una fea que retiene.
El arco de retención
| Latido | Trabajo | Presupuesto (de un short de 20s) |
|---|---|---|
| Gancho (0–1s) | Un fotograma + una línea que crea un bucle abierto | 0–1s |
| Preparación | Pagar el por qué ver — promesa, apuesta o la brecha | 1–4s |
| Cuerpo | Entregar valor en latidos; una idea por latido | 4–17s |
| Beneficio / bucle | Cerrar el bucle — o retroalimentarlo al fotograma 0 | 17–20s |
Escale el cuerpo, nunca el gancho. Un short de 60s tiene un cuerpo más largo y más latidos — el mismo gancho de 1 segundo.
Gramática del gancho (primeros ~1s)
El gancho es una oración + un visual que abre una brecha de curiosidad que el cerebro necesita cerrar. Elija un patrón y comprométase:
| 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 maneras de ___ en 30 segundos" | educativo / listicle |
| Interrupción de patrón | snap-zoom / whip-pan / desajuste visual en el fotograma 1 | entretenimiento |
| Negación | "Deja de hacer ___" / "Estás ___ equivocado" | opiniones contundentes |
Dos reglas: la línea de gancho está en pantalla como texto en el fotograma 1 (85% mira silenciado), y el visual más impactante también es el primer fotograma — nunca una rampa de entrada lenta. Mantenga un fotograma de apertura fuerte; no se desvanezca desde negro.
Interruptores de patrón y ritmo de corte
Un interruptor de patrón es cualquier cambio que reinicia la atención: un corte duro, zoom de golpe, inserción de metraje secundario, efecto de sonido, aparición de subtítulos o cambio de ángulo. En formato corto, la densidad es alta: un cambio visual cada ~2–4 segundos; los videos con un interruptor aproximadamente cada 4s retienen ~58% frente a ~41% para una cabeza parlante estática. El asesino es un medio plano: TikTok estrangula la distribución cuando la curva de visualización se aplana, así que nunca cosa el cuerpo con tomas de baja energía.
// Impulsa cada interruptor desde el FOTOGRAMA, no el reloj de pared — se renderiza de manera determinista.
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íe el intervalo — un metrónomo se lee como aburrimiento; los cortes desiguales se leen como impulso. Un zoom de acercamiento es el interruptor más barato que no necesita nuevo metraje:
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]); // ajustar a 112% en el ritmo
return <div style={{ transform: `scale(${scale})`, transformOrigin: "50% 45%" }}>{children}</div>;
};
Subtítulos
La mayoría de los espectadores miran silenciados, por lo que los subtítulos en pantalla no son opcionales: llevan el contenido y duplican como un interruptor de patrón cuando cada frase aparece. Mantenga 4–7 palabras por línea, alto contraste, dentro del área segura. No reimplemente la animación de subtítulos aquí — use la habilidad caption-animation para el tiempo palabra por palabra, resaltado de karaoke y 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 revisión
Un bucle sin fisuras cuenta cada revisión como tiempo de visualización fresco — un bucle limpio de 8s visto 3× es 300% de visualización, la señal más fuerte posible. Dos técnicas: emparejar el último fotograma con el primero (misma composición, posición, color) para que el corte sea invisible, y escribir un bucle de oración — formular el gancho para que el beneficio retroalimente al fotograma 0 ("…y por eso nunca — " → bucles al inicio). La mejor duración para la revisión es ~7–15s.
Áreas seguras 9:16
Componga dentro de la zona segura universal para que la interfaz de usuario de la plataforma nunca cubra texto o caras.
| Zona | Píxeles (1080×1920) | Evitar |
|---|---|---|
| Seguro universal (todas las plataformas) | centro 900×1400 | cualquier cosa crítica fuera de él |
| Superior | mantener despejado ~120px | perfil / interfaz de sonido |
| Inferior | mantener despejado ~320px | subtítulos, CTA, hashtags, barra de audio |
| Derecha | mantener despejado ~120px | columna de me gusta / comentar / compartir |
Coloque el texto del gancho y el sujeto clave en el cuadro central de 900×1400. Reserve los ~320px inferiores incluso si se ve vacío en el editor — ahí es donde la plataforma pinta sus propios subtítulos y botones.
Lista de verificación de salida
- La línea de gancho es texto en pantalla en el fotograma 1; el visual más fuerte es el primer fotograma (sin desvanecimiento).
- Un bucle abierto / promesa establecida en los primeros ~4s.
- Un interruptor de patrón visual cada ~2–4s; intervalos desiguales; sin medio plano.
- Subtítulos presentes (a través de
caption-animation), 4–7 palabras, dentro del área segura. - Bucle cerrado — fotograma primero/último emparejado o una oración que retroalimenta al fotograma 0.
- Compuesto dentro del cuadro central de 900×1400; inferior 320px / superior 120px / derecha 120px mantenidos despejados.
- Cada valor animado derivado de
useCurrentFrame()— sin temporizadores CSS/biblioteca.
Entregar y verificar (fotogramas renderizados → MP4)
Helper empaquetado (
scripts/): coloque sus fotogramas conscripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, luego afirme la codificación conscripts/probe-mp4.sh out.mp4 [WxH] [fps]. Consultescripts/README.md.
El short se envía como una composición de Remotion (<Composition> + esquema zod + defaultProps) — cada corte, zoom de acercamiento e interruptor impulsado por useCurrentFrame(), nunca Date.now() / Math.random() / temporizadores. Entregable = out/*.mp4 + el proyecto (re-renderizar por tema). Vertical 9:16 (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 PROPIEDADES ENVIADAS (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 = duraciónEnFotogramas-1
# Inspeccionar cada PNG:
# - Fotograma de GANCHO (~fotograma 0 / primeros 3s): la línea de gancho es texto en pantalla y se lee al instante; el visual más fuerte ya está arriba (sin desvanecimiento)
# - 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; despejado de ~12% superior, ~20-35% inferior (subtítulos/CTA/audio), carril de acción derecho
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 README
Por tema / lote: verifique UN tema a través de fotogramas antes de renderizar todos. Use npx remotion compositions para duraciónEnFotogramas/fps para elegir los fotogramas medio y último.
Antes de terminar:
- Los fotogramas se renderizan limpiamente en el gancho, medio y último fotograma — sin errores.
- El fotograma de gancho se lee al instante (texto en pantalla + visual más fuerte al frente, sin desvanecimiento); el primer y el último fotograma coinciden para una costura de bucle limpia.
- Gancho + sujeto + subtítulos se encuentran dentro del cuadro seguro central 9:16 900×1400 en cada fotograma verificado.
- Solo impulsado por fotogramas — sin
Date.now()/Math.random()/ temporizadores; cortes desiguales, sin medio plano. - Las propiedades enviadas de un tema real (no
defaultProps) se renderizan correctamente; MP4 codificado, GIF opcional.
Archivos de referencia
references/retention-pacing.md— una composición Remotion<Short>completa y ejecutable: un programador de tomas impulsado por fotogramas con cortes desiguales, el interruptor de patrón PunchIn, un gancho en pantalla, una superposición de área segura 9:16 y un bucle sin fisuras de primer/último fotograma. Además, una biblioteca de patrones de gancho, un método de depuración de curva de retención, mapas de zona segura por plataforma y el patrón de renderizado por lote plantilla×tema.