Composición de Toma
Escenifica el fotograma y mueve la cámara: sistemas de cuadrícula, áreas seguras, jerarquía focal, espacio negativo, capas de paralaje y cómo el diseño guía la vista a lo largo del tiempo. Produce notas de composición, estructura de capas (fondo/medio/primer plano) y planes concretos de movimiento de cámara con números.
Cuándo usarla
- Definir el diseño de un fotograma, el punto focal y el espacio negativo.
- Planificar direcciones de entrada/salida de elementos y trayectorias de movimiento.
- Diseñar movimientos de cámara: push/pull, paneo, seguimiento y paralaje.
- Adaptar una misma composición a 16:9, 9:16 y 1:1 con áreas seguras.
Árbol de decisión
¿Qué estás escenificando?
├─ El diseño de un fotograma estático
│ └─ establecer cuadrícula → colocar UN punto focal en un punto de potencia de tercios
│ → jerarquizar (tamaño>contraste>color>posición) → reservar espacio negativo
├─ Por dónde entran/salen las cosas
│ └─ seguir la dirección de lectura; borde más cercano; ease-out al entrar, ease-in al salir
│ (contenido nuevo → desde la derecha/abajo; atrás/deshacer → invertirlo)
├─ Una sensación de profundidad / un movimiento de cámara
│ └─ dividir en capas fondo/medio/primer plano (las tres capas de movimiento)
│ → UN movimiento de cámara por ritmo (push | paneo | seguimiento | paralaje), ease-in-out
└─ Una composición en diferentes formatos (16:9 / 9:16 / 1:1)
└─ maestra en 16:9, foco en la banda central → REAPILAR (no recortar) para 9:16
→ mantener el contenido crítico dentro de los márgenes de área segura de títulos
Referencia cruzada: aplicar los marcos compartidos. Esta habilidad es la mitad espacial de animation-principles. Aplícalos explícitamente:
- Regla de 1/3 (
animation-principles) tiene dos formas y esta habilidad usa ambas espacialmente: (a) Tercios de composición: coloca el punto focal en un punto de potencia de la regla de los tercios (33%/67%); (b) Distancia: ningún elemento viaja más de ~1/3 del fotograma sin un fotograma clave intermedio o un cambio de escala/opacidad, para que las entradas sigan siendo legibles. - Tres capas de movimiento (
animation-principles: Primaria / Secundaria / Ambiente) se asignan directamente a la profundidad: primer plano = Primaria (el movimiento que sigue la vista), medio plano = Secundaria (el sujeto + reacciones de apoyo), fondo = Ambiente (vida lenta y de bajo contraste). La velocidad del paralaje escala con ese rol. - Establecer los Tres Pilares (Intención emocional / Narrativa visual / Artesanía del movimiento) y la Personalidad del movimiento elegida (
motion-art-direction) antes de numerar un movimiento de cámara: lo premium quiere pushes lentos y largos, lo enérgico quiere whip-pans.
Flujo de trabajo principal
1. Establecer una cuadrícula
Una cuadrícula proporciona alineación y ritmo. Por defecto, usa una cuadrícula de 12 columnas para web/video apaisado (se divide en mitades, tercios, cuartos, sextos) con medianiles y márgenes exteriores. Para un fotograma de 1920 px de ancho: margen exterior 80-120 px, 12 columnas, medianil 24-32 px.
ancho_contenido = ancho_fotograma - 2 * margen
ancho_columna = (ancho_contenido - (cols - 1) * medianil) / cols
Ejemplo (1920 ancho, margen 100, medianil 24, 12 cols): contenido 1720, columna = (1720 - 11*24)/12 = 121.3 px.
Una cuadrícula de línea base (ritmo vertical) de 8 px es la unidad de espaciado estándar; ajusta el tamaño y el espacio de todo en múltiplos de 8 (8/16/24/32/48/64) para lograr cohesión visual.
2. Colocar el punto focal
Usa la regla de los tercios: divide el fotograma en una cuadrícula de 3x3; coloca el sujeto principal en una línea de tercio o en una intersección (los "puntos de potencia"), no en el centro exacto, a menos que la pieza use deliberadamente la simetría para lograr quietud / formalidad. Las intersecciones caen aproximadamente en el 33%/67% horizontal y vertical.
Construye la jerarquía visual en este orden de prioridad para dirigir la vista: tamaño > contraste > color > posición. El elemento más grande y de mayor contraste capta la atención primero. Establece exactamente un punto focal principal por fotograma; los elementos secundarios apoyan, nunca compiten.
3. Usar el espacio negativo como ritmo
No llenes el fotograma. Un espacio negativo generoso alrededor del punto focal hace que se lea como premium y seguro, y le da al movimiento espacio para respirar. El espacio en blanco es un elemento compositivo activo, no un sobrante.
4. Capas de la escena (fondo / medio / primer plano) para profundidad y paralaje
Divide la composición en capas de profundidad: fondo (más lento, menor contraste, a menudo desaturado/desenfocado), medio plano (el sujeto), primer plano (más rápido, puede desenfocarse al cruzarse). Paralaje = mover capas a diferentes velocidades para simular profundidad.
Estas capas de profundidad SON las animation-principles tres capas de movimiento proyectadas en el eje Z: el rol de cada capa dicta su velocidad, contraste y cuánto movimiento merece:
| Profundidad | Capa de movimiento | Velocidad de paralaje | Contraste / enfoque | Qué vive aquí |
|---|---|---|---|---|
| Fondo | Ambiente | 0.1–0.3x | bajo, a menudo desaturado/desenfocado | cielo, degradado, textura, decorado |
| Medio plano | Secundaria | 0.5–0.7x | medio; apoya al sujeto | entorno del sujeto, elementos de apoyo |
| Primer plano | Primaria | 1.0–1.5x | nítido en el sujeto; los accesorios de FP se desenfocan al cruzarse | el sujeto héroe + accesorios más cercanos |
El primer plano puede exceder 1.0 para leerse como muy cercano. El movimiento Primario es el que la vista sigue; nunca le des a dos capas un movimiento primario en competencia.
5. Lenguaje de cámara (funciona en 2D y 3D)
- Push / pull: escalar hacia o desde el sujeto (dolly). Genera intimidad o revela contexto. 800-2000 ms, ease-in-out.
- Paneo / inclinación / movimiento: trasladar el fotograma a través de la escena. Revela espacio, sigue la acción.
- Seguimiento: mantener un sujeto en movimiento encuadrado (a menudo ligeramente descentrado, liderando el movimiento).
- Paralaje: movimiento en capas que vende profundidad.
Una toma, una intención. No combines push + paneo + rotación simultáneamente: los movimientos combinados se leen como caóticos. Elige el movimiento único que sirva al ritmo. Elementos esenciales de temporización en línea: los movimientos de cámara usan ease-in-out (cubic-bezier(0.65, 0, 0.35, 1)); nunca linear excepto en bucles continuos; más lento es más cinematográfico.
6. La dirección de entrada/salida tiene significado
El movimiento que sigue la dirección de lectura (izquierda a derecha, arriba a abajo en locales LTR) se siente natural y suave; invertirlo crea tensión o señala "atrás/deshacer". Iguala la dirección con la intención:
- Contenido nuevo que llega -> entra desde la derecha / desde abajo.
- Descartar / volver atrás -> salir a la derecha o abajo, o invertir la entrada.
- Profundizar -> escalar hacia arriba / push hacia adentro.
Los elementos generalmente deben entrar y salir por el borde del fotograma más cercano con un ligero rebasamiento al entrar (ease-out) y aceleración al salir (ease-in).
7. Áreas seguras y adaptación a múltiples formatos
Mantén todo el contenido crítico (texto, logotipos, rostros, CTAs) dentro de un margen de área segura de títulos para que nada se recorte u oculte detrás de la interfaz de usuario de la plataforma.
| Formato | Uso | Margen de área segura de títulos | Notas |
|---|---|---|---|
| 16:9 | YouTube, héroe web | ~5% todos los lados | el área segura de títulos de transmisión históricamente era 10% |
| 9:16 | Reels, TikTok, Stories | superior ~12-14%, inferior ~18-20%, laterales ~6% | la IU de la plataforma consume la parte superior e inferior |
| 1:1 | publicaciones de feed | ~6-8% todos los lados | simétrico |
| 4:5 | feed (más alto) | ~6% laterales, ~8% superior/inferior | maximiza el espacio del feed |
Diseña el punto focal lo suficientemente centrado para que sobreviva a todos los recortes, luego deja que los elementos secundarios se reorganicen por formato. Para 16:9 -> 9:16, re-apila los arreglos verticalmente en lugar de simplemente recortar los lados.
Ejemplos trabajados
BUENO: héroe de producto, 16:9 → 9:16
Brief: héroe de lanzamiento de app, personalidad Premium, debe funcionar como héroe web y como Reel.
- Cuadrícula: 1920×1080, margen 100, medianil 24, 12 cols. El mockup del teléfono abarca las columnas 7–11 (columna de potencia derecha).
- Foco: pantalla del teléfono en la intersección del tercio derecho (1280, 360) — no centrado. Un punto focal; el titular (columnas 1–5) es secundario, de menor contraste.
- Profundidad (tres capas de movimiento): bg = deriva de degradado suave, 0.2x, Ambiente. mid = mockup del teléfono, 0.6x, etapa Secundaria. fg = un chip de UI desenfocado que pasa flotando, 1.2x + desenfoque de 3px, se lee como indicio de profundidad Primaria.
- Cámara: un solo push-in, escala 1.0→1.10 en 1600 ms ease-in-out, origen en la pantalla del teléfono — coincide con Premium (lento, sin rebasamiento). Sin paneo añadido.
- Adaptación 9:16: re-apilar — el titular se mueve encima del teléfono, el teléfono se sube a la parte superior media para despejar la zona de CTA/navegación del 19% inferior, tipo +20%. El foco sobrevive al recorte porque comenzó en la banda central.
Por qué funciona: un punto focal, roles de profundidad asignados, un movimiento de cámara, reflujo consciente de áreas seguras en lugar de un recorte ciego.
ANTI-PATRÓN: el fotograma "todo centrado, todo en movimiento"
- Mockup de teléfono en el centro exacto, titular centrado arriba, logotipo centrado abajo → tres elementos compitiendo en el mismo eje, sin jerarquía, sin punto de potencia.
- Las tres capas se deslizan hacia la izquierda a la misma velocidad 1.0x → sin paralaje, sin profundidad, se lee como "toda la plantilla se movió" (viola la Regla de 1/3 / distancia: un deslizamiento de ancho completo sin fotograma clave intermedio).
- La cámara hace push + paneo + una ligera rotación a la vez → caótico, sin una intención única.
- El 9:16 se hace recortando los lados del 16:9 → titular y logotipo recortados, teléfono demasiado bajo detrás de la barra de navegación.
Solución: elige un punto de potencia focal, asigna a cada capa un rol de profundidad + velocidad de paralaje distinta, un movimiento de cámara, y re-apila para vertical en lugar de recortar.
Errores comunes
| Síntoma | Por qué | Solución |
|---|---|---|
| El fotograma se siente plano / "la plantilla se movió" | todas las capas se mueven a una velocidad; sin roles de profundidad | asigna a fondo/medio/primer plano los roles Ambiente/Secundaria/Primaria + paralaje 0.2/0.6/1.2x |
| La vista no sabe dónde mirar | 2+ elementos de igual tamaño/contraste, todos centrados | un punto focal en un punto de potencia de tercios; jerarquizar tamaño>contraste>color>posición |
| El movimiento de cámara se lee como caótico | push + paneo + rotación combinados | un movimiento por ritmo; elige el que sirva a la intención |
| Contenido recortado en teléfonos | diseñado para 16:9, recortado a 9:16 | re-apilar verticalmente; mantener contenido crítico en márgenes de área segura (superior 13% / inferior 19% en 9:16) |
| La entrada se lee como "deslizamiento", no como "evento" | el elemento viaja >1/3 del fotograma en un solo movimiento sin interrupción | romper con un fotograma clave intermedio o emparejar el viaje con escala/opacidad (Regla de 1/3, distancia) |
| Se ve barato / apretado | fotograma lleno de borde a borde | reserva espacio negativo alrededor del punto focal; es un elemento activo |
| El movimiento lucha contra la historia | números elegidos antes que la intención | establecer primero los Tres Pilares + Personalidad del movimiento, luego numerar el movimiento |
Entregable: un plan de composición
Un buen plan de composición se entrega a una habilidad de implementación (gsap-web, remotion-video, after-effects) y contiene:
- Especificación del fotograma: formato(s), resolución, fps, cuadrícula (cols / margen / medianil), unidad de línea base.
- Punto focal: coordenadas (px o %) en un punto de potencia de tercios + la clasificación jerárquica de cada elemento.
- Mapa de capas: cada elemento asignado a fondo/medio/primer plano → Ambiente/Secundaria/Primaria, con velocidad de paralaje.
- Entrada/salida: por elemento: borde, dirección, familia de easing, y si el viaje excede 1/3 (y cómo se rompe).
- Movimiento de cámara: el movimiento único, su propiedad + valores de→a, duración, easing, transform-origin.
- Áreas seguras: márgenes de área segura por formato de destino + el plan de re-apilado para vertical.
- Referencias cruzadas: qué Personalidad del movimiento y qué decisiones de los Pilares impulsan la temporización.
Antes de terminar — lista de verificación
- Exactamente un punto focal principal, en un punto de potencia de tercios (o simetría deliberada).
- Jerarquía clasificada (tamaño > contraste > color > posición); los secundarios no compiten.
- Espacio negativo reservado alrededor del punto focal.
- Cada elemento asignado a una capa de profundidad (fondo/medio/primer plano = Ambiente/Secundaria/Primaria) con una velocidad de paralaje.
- Un movimiento de cámara, no apilado; con easing (no linear a menos que sea un bucle); 800–2000 ms para movimientos héroe.
- Las entradas/salidas usan el borde más cercano, siguen la dirección de lectura, ease-out al entrar / ease-in al salir.
- Ningún elemento viaja >1/3 del fotograma sin un fotograma clave intermedio o cambio de escala/opacidad.
- Contenido crítico dentro de los márgenes de área segura para cada formato de destino; el vertical se re-apila, no se recorta.
- Personalidad del movimiento + Tres Pilares establecidos antes de elegir cualquier número.
Referencia rápida
| Necesidad | Valor predeterminado |
|---|---|
| Cuadrícula | 12 columnas, línea base de 8 px, espaciado en múltiplos de 8 |
| Colocación del foco | punto de potencia de regla de tercios, no centro exacto |
| Orden jerárquico | tamaño > contraste > color > posición |
| Capas de profundidad | fondo / medio / primer plano, paralaje 0.2x / 0.6x / 1.2x |
| Cámara | un movimiento a la vez, ease-in-out, 800-2000 ms |
| Entrada / salida | seguir dirección de lectura; ease-out al entrar, ease-in al salir |
| Área segura 9:16 | superior 12%, inferior 18%, laterales 6% |
Archivos de referencia
references/camera-and-grids.md: matemáticas de cuadrícula con números trabajados, tablas completas de porcentajes de área segura por formato, código de capas de paralaje (desplazamiento CSS + puntero JS + Three.js) y recetas de movimiento de cámara con nombre (push-in, whip-pan, órbita, dolly-zoom) con valores de fotogramas clave.