lower-thirds

Tercios Inferiores

Construye un tercio inferior limpio y con marca — la leyenda de nombre/rol que vive en la banda inferior del encuadre — que se anima al entrar, se mantiene el tiempo suficiente para leer y sale sin robar la toma. El arte es la moderación: una revelación nítida, una jerarquía tipográfica sólida, una colocación correcta en el área segura y una plantilla que impulsa una lista completa de oradores.

Cuándo usarlo

• Etiquetas de nombre para oradores/entrevistas, listas de panelistas, leyendas de talking heads.
• Títulos estilo broadcast, cintillos de noticias, placas de nombre para podcasts/webinars.
• Plantillar un diseño a través de una lista de nombres/títulos → muchos clips (la recompensa).

Anatomía

Un tercio inferior son dos líneas de texto más una base gráfica, colocadas en la banda inferior:

Elemento	Rol	Tratamiento tipográfico
Nombre (principal)	Quién	Mayor tamaño, más pesado, tracking más ajustado
Rol/título (secundario)	Qué/dónde	~45–60% del tamaño del nombre, peso más ligero, a menudo un color de acento de marca
Barra / panel / acento	Se lee contra cualquier fondo	Sólido u opacidad 70–85%; una regla de acento se vincula a la marca

Mantenlo en dos líneas. Una línea de nombre + una línea de rol es todo el trabajo — las líneas adicionales erosionan la jerarquía y saturan el área segura.

Tres reglas que evitan títulos de aspecto barato

1. Nunca cortes en seco un título al entrar o salir. Una aparición/desaparición brusca se lee como un error. Incluso un fundido o deslizamiento de 12 fotogramas lo hace parecer producido.
2. Escalona, no golpees. Anima la barra primero, luego el nombre, luego el rol, cada uno desplazado por 3–6 fotogramas. Todo llegando a la vez se siente plano; una pequeña cascada se siente diseñada.
3. Mantén el tiempo suficiente para leer dos veces. Aproximadamente 3–5s en pantalla (léelo en voz alta dos veces). Demasiado corto y se pierde; demasiado largo y molesta. Anima al entrar/salir, nunca a mitad del segmento.

Animaciones de entrada y salida

Elige un lenguaje de movimiento y reutilízalo. Las revelaciones más fiables y de aspecto premium:

Revelación	Sensación	Cómo
Deslizar + fundido	Limpio, por defecto	Traducir ~24–40px mientras se desvanece; ease-out al entrar
Barra de barrido	Broadcast	Una barra escala/barre (scaleX/clip), el texto se desvanece detrás
Revelación con máscara	Premium	Recortar el texto a un rectángulo móvil para que las letras "aparezcan barriendo"

Usa una curva de easing asimétrica: un ease-out rápido (cubic-bezier(.22,1,.36,1)) al entrar, un ease-in más rápido al salir. Sal más rápido de lo que entraste (~⅔ de la duración) para que el título se quite de en medio.

/* Revelación con máscara: el texto aparece barriendo de izquierda a derecha, sin plugin */
.lt-name { clip-path: inset(0 100% 0 0); animation: wipe .5s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }

Temporización de entrada/salida y permanencia

Piensa en tres fases. Presupuesta fotogramas, no sensaciones (a 30 fps):

Fase	Presupuesto	Nota
Entrada	12–18f (0.4–0.6s)	Escalonado: barra → nombre → rol
Permanencia	90–150f (3–5s)	La duración legible; escala con la longitud de la línea
Salida	8–12f (0.27–0.4s)	Más rápida que la entrada

En código, impulsa cada estado desde el fotograma actual (o una línea de tiempo pausada), no desde el tiempo real — un renderizador de video exige fotogramas deterministas. Expresa entrada/permanencia/salida como una única curva de progreso para que el mismo componente funcione tanto en vivo en un navegador como fotograma a fotograma en un renderizador.

Área segura y convenciones de broadcast

El tercio inferior debe sobrevivir a cualquier pantalla y UI de plataforma. Compón dentro del área segura de títulos (~90% interior / margen 5%) y respeta la interfaz de la plataforma:

Encadre	Anclaje	Evitar
16:9 (1920×1080)	Borde izquierdo a ~5% de margen; línea base ~80–85% hacia abajo	5% exterior (título seguro), 10% exterior de acción segura
9:16 (1080×1920)	Mismo margen izquierdo; eleva la banda	~18% inferior (subtítulos/UI), ~12% superior
1:1 (1080×1080)	Banda inferior, centro-izquierda	5% exterior

Ancla a la izquierda y crece hacia la derecha para que los nombres de diferentes longitudes permanezcan fijos y nunca se recentren de forma extraña. Mantén la línea de rol dentro del mismo margen izquierdo que el nombre. Para 9:16, no coloques el título en la parte inferior — los subtítulos y botones de la plataforma están ahí.

Jerarquía tipográfica y estilo de marca

La jerarquía es todo el diseño. Haz que el nombre sea inequívocamente dominante:

• Contraste de tamaño ≥ 1.6× (nombre vs rol). Si no estás seguro, haz el nombre más grande, no el rol.
• Peso + color: nombre en negrita/blanco casi puro; rol en un peso más ligero y un color de acento de marca (un acento, usado consistentemente).
• Contraste para legibilidad: el texto se superpone a metraje desconocido. Usa una barra sólida/semiopaca, un scrim sutil o una sombra de texto suave para que se lea tanto sobre planos brillantes como oscuros.
• Bloqueo de marca: fija la fuente, el color de acento, el estilo de barra y el radio de esquina en un único objeto de tema para que cada título de una serie coincida.

Plantillar un diseño a través de una lista

La razón para construir esto en código: cambia los datos de texto, re-exporta — sin re-animar. Haz que nombre/rol/tema sean props, nunca codificados, luego mapea una lista a instancias.

const LISTA = [
  { name: "Ada Lovelace",  role: "Fundadora, Motores Analíticos" },
  { name: "Grace Hopper",  role: "Contralmirante, Armada de EE.UU." },
  { name: "Alan Turing",   role: "Matemático" },
];
// Un diseño <LowerThird>; mapea la lista → muchas instancias (secuéncialas en un renderizador)
{LISTA.map((p, i) => <LowerThird key={p.nombre} {...p} theme={MARCA} startFrame={i * 150} />)}

En un renderizador, haz que la lista sea una prop de entrada y renderiza una vez por fila (--props) para emitir un clip con marca por persona — misma animación, misma marca, solo cambia el texto. Consulta references/lower-third-component.md para el componente ejecutable completo y el script por lotes.

Lista de verificación de salida

• Solo dos líneas: nombre dominante, rol secundario (contraste de tamaño ≥1.6×).
• Animado al entrar y salir (sin corte brusco); entrada escalonada barra→nombre→rol; salida más rápida.
• Permanece 3–5s (legible dos veces); movimiento solo en los extremos, nunca a mitad del segmento.
• Anclado a la izquierda dentro del área segura de título; en 9:16, la banda elevada por encima de la zona de UI del 18% inferior.
• Texto legible sobre cualquier plano (barra/scrim/sombra); un acento de marca consistente.
• Nombre/rol/tema son props — una plantilla renderiza toda la lista.

Entregar y verificar (fotogramas renderizados → MP4)

Helper empaquetado (scripts/): mosaico de 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]. Consulta scripts/README.md.

El tercio inferior se entrega como una composición de Remotion (<Composition> + esquema zod + defaultProps, nombre/rol/tema como props) — entrada/permanencia/salida impulsados por useCurrentFrame(), nunca Date.now() / Math.random() / temporizadores. Entregable = out/*.mp4 + el proyecto (re-renderizar por fila de lista). 9:16 vertical (1080×1920) es el valor predeterminado.

Bucle de verificación — renderizar fotogramas → inspeccionar → codificar. Muestrea las tres fases para detectar un error de escalonamiento o área segura antes de codificar (o procesar toda la lista por lotes).

# Fotogramas en entrada / permanencia / salida — CON PROPS ENVIADAS (una fila real de la lista, no valores predeterminados)
npx remotion still LowerThird out/f-entrada.png --frame=10  --props='{"name":"Ada Lovelace","role":"Fundadora, Motores Analíticos"}'
npx remotion still LowerThird out/f-permanencia.png --frame=75  --props='{"name":"Ada Lovelace","role":"Fundadora, Motores Analíticos"}'
npx remotion still LowerThird out/f-salida.png  --frame=N   --props='{"name":"Ada Lovelace","role":"Fundadora, Motores Analíticos"}'

# Inspecciona cada PNG — enfócate en el fotograma de PERMANENCIA (completamente en pantalla):
#  - la jerarquía se mantiene: nombre dominante (>=1.6x rol), rol en acento de marca; ambos completamente revelados, no a medio wipe
#  - bloqueo de marca: fuente, color de acento, barra/scrim correctos; legible sobre el plano
#  - área segura 9:16: banda ELEVADA por encima de la zona de UI del ~20-35% inferior, libre del ~12% superior y del carril de acción derecho; anclada a la izquierda dentro del área segura de título
#  - los fotogramas de entrada/salida muestran revelación parcial (la animación realmente se ejecuta), no un corte brusco

npx remotion render LowerThird out/lower-third.mp4 --props='{"name":"Ada Lovelace","role":"Fundadora, Motores Analíticos"}'
npx remotion render LowerThird out/demo.gif --codec=gif                # Clip de prueba para README

Lista por lotes: verifica UNA fila mediante fotogramas antes de renderizar todos los nombres — detecta un error de diseño/desbordamiento una vez, no N veces. Usa npx remotion compositions para durationInFrames/fps y elegir los fotogramas de permanencia + salida.

Antes de finalizar:

1. Los fotogramas se renderizan limpiamente en entrada, permanencia y salida — sin activos de fuente/marca faltantes.
2. En el fotograma de permanencia: nombre dominante sobre rol, acento de marca + barra correctos, completamente (no parcialmente) revelado.
3. La banda está dentro del área segura 9:16 — elevada por encima de la zona de UI inferior, libre de los carriles superior y derecho — en cada fotograma verificado.
4. Solo impulsado por fotogramas — sin Date.now() / Math.random() / temporizadores; entrada/salida muestran movimiento, nunca un corte brusco.
5. Una fila real de la lista (no defaultProps) se renderiza correctamente; MP4 codificado, GIF opcional.

Archivos de referencia

• references/lower-third-component.md — un tercio inferior ejecutable completo: un componente Remotion con entrada escalonada con spring, permanencia legible y salida más rápida impulsada puramente por fotogramas; un objeto de tema tipado para bloqueo de marca; el patrón de secuenciación lista→muchas instancias; un script de render por lotes por fila; más una versión CSS/HTML sin dependencias del mismo diseño con variantes de máscara de revelación y barra de barrido.