Tercios inferiores
Construye un tercio inferior limpio y con marca: la leyenda de nombre/cargo que vive en la banda inferior del encuadre, que entra con animación, se mantiene el tiempo suficiente para leer y sale sin robar el plano. El arte está en la moderación: una revelación nítida, una jerarquía tipográfica fuerte, la colocación correcta en el área segura y una plantilla que impulsa a toda una lista de oradores.
Cuándo usarlo
- Etiquetas de nombre para oradores/entrevistas, carteles de panel, leyendas de cabezas parlantes.
- Títulos de estilo broadcast, cintillos de noticias, placas de identificación para podcasts/webinarios.
- Plantillar un diseño para 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 | Más grande, más pesado, interletraje más ajustado |
| Cargo/título (secundario) | Qué/dónde | ~45–60% del tamaño del nombre, peso más ligero, a menudo un color de acento de la marca |
| Barra / panel / acento | Legible sobre cualquier fondo | Sólido u opacidad del 70–85%; una regla de acento se vincula a la marca |
Mantenlo en dos líneas. Una línea de nombre + línea de cargo es todo el trabajo; las líneas adicionales erosionan la jerarquía y saturan el área segura.
Tres reglas que evitan los títulos de aspecto barato
- Nunca cortes en seco un título al entrar o salir. Una aparición/desaparición simple se lee como un error. Incluso un fundido o deslizamiento de 12 fotogramas hace que se sienta producido.
- Escalonadamente, no de golpe. Anima primero la barra, luego el nombre, luego el cargo, cada uno con un desplazamiento de 3–6 fotogramas. Que todo llegue a la vez se siente plano; una cascada corta se siente diseñada.
- Mantén el tiempo suficiente para leer dos veces. Aproximadamente 3–5 segundos en pantalla (léelo en voz alta dos veces). Muy corto y se pierde; muy largo y molesta. Anima la entrada y salida, 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 + fundir | Limpio, predeterminado | Trasladar ~24–40px mientras se desvanece; ease-out al entrar |
| Barra de barrido | Broadcast | Una barra escala/entra (scaleX/clip), el texto aparece detrás |
| Revelación con máscara | Premium | Recortar el texto a un rectángulo en movimiento para que las letras "aparezcan" |
Usa una atenuación 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 salga del camino.
/* Revelación con máscara: el texto aparece de izquierda a derecha, no se necesita 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) | Escalonada: barra → nombre → cargo |
| Permanencia | 90–150f (3–5s) | La pausa 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 de pared; un renderizador de video exige fotogramas deterministas. Expresa entrada/permanencia/salida como una única curva de progreso para que el mismo componente funcione en vivo en un navegador y fotograma a fotograma en un renderizador.
Área segura y convenciones broadcast
El tercio inferior debe sobrevivir a cualquier pantalla y plataforma UI. Compón dentro del área segura de títulos (interior ~90% / margen 5%) y respeta la interfaz de la plataforma:
| Encuadre | Anclaje | Evitar |
|---|---|---|
| 16:9 (1920×1080) | Borde izquierdo en ~5% de margen; línea base ~80–85% abajo | 5% exterior (área segura de títulos), 10% exterior de área segura de acción |
| 9:16 (1080×1920) | Mismo margen izquierdo; eleva la banda | ~18% inferior (leyendas/UI), ~12% superior |
| 1:1 (1080×1080) | Banda inferior, centro-izquierda | 5% exterior |
Ancla a la izquierda y crece hacia la derecha para que nombres de diferentes longitudes permanezcan fijos y nunca se recentren de manera incómoda. Mantén la línea del cargo dentro del mismo margen izquierdo que el nombre. Para 9:16, no coloques el título en la parte inferior: allí se ubican las leyendas y botones de la plataforma.
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 cargo). Si no estás seguro, agranda el nombre, no el cargo.
- Peso + color: nombre en negrita/blanco cercano; cargo en un peso más ligero y un color de acento de marca (un acento, usado de manera consistente).
- Contraste para legibilidad: el texto se superpone a material de archivo desconocido. Usa una barra sólida/semiopaca, un suave filtro o una sombra de texto suave para que se lea tanto sobre fondos claros como oscuros.
- Bloqueo de marca: fija la fuente, el color de acento, el estilo de barra y el radio de esquina en un objeto de tema para que cada título en una serie coincida.
Plantillar un diseño para una lista
La razón para construir esto en código: cambia el texto/datos, reexporta — sin re-animar. Haz que nombre/cargo/tema sean props, nunca codificados, luego asigna un roster a instancias.
const ROSTER = [
{ 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)
{ROSTER.map((p, i) => <LowerThird key={p.name} {...p} theme={BRAND} startFrame={i * 150} />)}
En un renderizador, haz que el roster 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, cargo secundario (contraste de tamaño ≥ 1.6×).
- Animado al entrar y salir (sin corte brusco); entrada escalonada barra→nombre→cargo; salida más rápida.
- Permanencia de 3–5s (legible dos veces); movimiento solo al inicio y final, nunca a mitad del segmento.
- Anclado a la izquierda dentro del área segura de títulos; banda 9:16 elevada por encima de la zona UI del 18% inferior.
- Texto legible sobre cualquier placa (barra/filtro/sombra); un acento de marca en todo momento.
- Nombre/cargo/tema son props — una plantilla renderiza todo el roster.
Entregar y verificar (fotogramas renderizados → MP4)
Script empaquetado (
scripts/): genera una hoja de contactos de tus fotogramas conscripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, luego verifica la codificación conscripts/probe-mp4.sh out.mp4 [WxH] [fps]. Consultascripts/README.md.
El tercio inferior se entrega como una composición de Remotion (<Composition> + schema zod + defaultProps, nombre/cargo/tema como props) — entrada/permanencia/salida todo impulsado por useCurrentFrame(), nunca Date.now() / Math.random() / temporizadores. Entregable = out/*.mp4 + el proyecto (re-renderizar por fila del roster). 9:16 vertical (1080×1920) es el valor predeterminado.
Bucle de verificación — renderiza fotogramas → inspecciona → codifica. Muestrea las tres fases para detectar un error de escalonamiento o de área segura antes de codificar (o procesar por lotes todo el roster).
# Fotogramas en entrada / permanencia / salida — CON PROPS REALES (una fila real del roster, no valores predeterminados)
npx remotion still LowerThird out/f-enter.png --frame=10 --props='{"name":"Ada Lovelace","role":"Fundadora, Motores Analíticos"}'
npx remotion still LowerThird out/f-dwell.png --frame=75 --props='{"name":"Ada Lovelace","role":"Fundadora, Motores Analíticos"}'
npx remotion still LowerThird out/f-exit.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 cargo), cargo en acento de marca; ambos completamente revelados, no a medio wipe
# - bloqueo de marca: fuente, color de acento, barra/filtro correctos; legible sobre la placa
# - área segura 9:16: banda ELEVADA por encima de la zona UI inferior ~20-35%, libre del ~12% superior y del carril de acción derecho; anclada a la izquierda dentro del área segura de títulos
# - 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
Procesamiento por lotes del roster: 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 y salida.
Antes de terminar:
- Los fotogramas se renderizan limpiamente en entrada, permanencia y salida — sin activos de fuente/marca faltantes.
- En el fotograma de permanencia: nombre dominante sobre cargo, acento de marca + barra correctos, completamente (no parcialmente) revelado.
- La banda está dentro del área segura 9:16 — elevada por encima de la zona UI inferior, libre de los carriles superior y derecho — en cada fotograma verificado.
- Solo impulsado por fotogramas — sin
Date.now()/Math.random()/ temporizadores; entrada/salida muestran movimiento, nunca un corte brusco. - Una fila real del roster (no
defaultProps) se renderiza correctamente; MP4 codificado, GIF opcional.
Archivos de referencia
references/lower-third-component.md— un tercio inferior completo y ejecutable: un componente de Remotion con entrada escalonada con resorte, permanencia legible y salida más rápida impulsada puramente por fotogramas; un objeto de tema tipado para el bloqueo de marca; el patrón de secuenciación lista→muchas instancias; un script de renderizado por lotes por fila; más una versión CSS/HTML sin dependencias del mismo diseño con variantes de revelación con máscara y barra de barrido.