Plano cinematográfico
Eres el director y el director de fotografía, no el diseñador de movimiento. La película es una secuencia de planos heroicos. Cada uno mira una pieza real de la interfaz del producto desde un ángulo bajo e inclinado, tan cerca que el plano focal cubre solo una línea o dos de texto y todo lo demás se funde en negro. La cámara se desplaza lentamente hacia donde ocurrirá la siguiente acción. La interfaz hace el trabajo por sí sola: las cosas se escriben, se transmiten, se seleccionan y se redactan mientras observamos. Nada se explica con subtítulos.
Este skill trata sobre la cámara, el encuadre, la luz y la edición. Construye la película con cualquier pila de renderizado. Sea cual sea la que elijas, haz que cada fotograma sea una función pura del tiempo, para que la película se renderice de forma determinista y pueda tener desenfoque de movimiento.
Lee references/look.md para conocer las recetas exactas de cámara, profundidad de campo, luz, revelado y tipo. Lee references/shot-list-example.md para ver un ejemplo completo de la gramática de los planos.
El estilo
Un vacío negro. El producto flota en él como una losa oscura, inclinada hacia atrás, alejándose de la cámara, iluminada por un foco suave que sigue lo que importa y deja que todo lo demás caiga en la oscuridad. La cámara está baja y cerca, mirando a lo largo de la interfaz en lugar de hacia ella, de modo que las líneas de texto cruzan el encuadre en diagonal y se empequeñecen hacia la distancia. El plano focal es una banda fina: un control, una línea de escritura, una fila de una lista está nítida, y el resto es un bokeh suave. La cámara nunca deja de desplazarse y nunca se mueve rápido. Los planos son lo suficientemente largos como para ver algo suceder. El único color es el del propio producto. Moderación en todo lo demás.
1. Encuentra la historia antes de los planos
Antes de planificar una sola cámara, escribe:
- El flujo: las 4–7 cosas que suceden en pantalla, en orden. Ejemplos: abrir una vista, seleccionar una pestaña, escribir un mensaje, ver cómo llega la respuesta mientras se transmite, ver cómo un documento se escribe solo, aprobar.
- El clímax: el momento en que el producto hace algo notable visiblemente. La película existe para llegar a este fotograma.
- El contenido de demostración: datos concretos y creíbles dentro de la interfaz, como nombres, IDs, estados, código y texto corto con sonido humano. La densidad de aspecto real es lo que hace que un primer plano sea hermoso. Una lista de doce incidencias plausibles se lee como un producto; tres marcadores de posición grises se leen como una maqueta.
- Una línea de texto: el nombre del producto o la funcionalidad, seguido de un eslogan de cinco palabras o menos.
2. Escribe la lista de planos
Publica la lista de planos antes de construir, luego continúa:
| # | Corta en | Dur. | Sujeto (lo que está enfocado) | Escala | Ángulo | Movimiento | Acción |
|---|
Reglas:
- Duración: 45–55 s en total, con 8–10 planos de interfaz, luego el texto y el logotipo.
- La duración del plano sigue a la acción. Los planos de proceso (escritura, streaming, un documento que se escribe solo, un diff largo) duran 5–9 s. Los planos de puntuación (una pestaña, un botón, un elemento de navegación) duran 2–3.5 s. Alterna los dos, de modo que una observación larga vaya seguida de un acento corto. Mediana de unos 5 s.
- Corta en la acción, no en un metrónomo. No hay una cuadrícula de ritmo. Entra cuando el sujeto ya esté en el encuadre o a punto de llegar; la acción comienza dentro de 0.3–0.8 s; mantén el resultado durante 0.5–1 s; corta mientras la cámara aún se está moviendo.
- Una idea por plano. Un plano puede contener una cadena corta (escribir → enviar → comienza la respuesta) solo si la cámara sigue un hilo continuo.
- Varía la escala como un editor. Dominan los macro extremos y los macros. Los planos medios llevan el proceso más largo. Reserva el plano general (toda la ventana, casi frontal) para el clímax, donde aterriza como un lanzamiento. Vuelve a un primer plano después.
- Alterna la diagonal. Si el texto de un plano sube hacia la derecha, el texto del siguiente plano baja hacia la derecha, o el plano se inclina hacia el otro lado. Cada corte debe leerse como una nueva posición de cámara.
- Sin cursor de continuidad. La interfaz actúa por sí sola (ver sección 4). El espectador nunca necesita seguir un puntero entre planos.
- Las superficies separadas obtienen configuraciones separadas. Cuando la historia se mueve a otra superficie (una terminal, un teléfono, otra aplicación), dale su propia losa en el mismo vacío negro y haz un corte brusco hacia ella.
Escalas de plano
Mide la escala como la magnificación de la interfaz en el punto focal, en relación con su tamaño nativo:
| Escala | Magnificación | Uso para | Profundidad de campo |
|---|---|---|---|
| Macro extremo | 5–7× | Una sola pestaña, un botón, un elemento de navegación, una insignia de estado. Una o dos palabras llenan un tercio del encuadre. | Solo el sujeto está nítido. Todo lo demás es bokeh intenso. |
| Macro | 2.5–4× | Un compositor con una línea de escritura, unas pocas filas de una lista, un fragmento de código | Una banda de 2–4 líneas de texto de profundidad está nítida |
| Medio | 1.5–2.5× | Un panel en funcionamiento: una lista que se transmite, un documento que se escribe solo, un diff con una barra lateral | Una banda más ancha está nítida; el borde lejano y el borde cercano permanecen suaves |
| General | 0.8–1.1× | Solo el clímax: toda la ventana, casi frontal, con contenido desplazándose o cambiando | Mayormente nítido; los bordes del encuadre aún se suavizan |
Los planos macro deben mantenerse nítidos. Rasteriza la interfaz a la resolución de la magnificación (por ejemplo, 6×) antes de que la cámara la escale. Nunca aumentes la escala de un mapa de bits de 1×.
Ángulo de cámara
Esta es la seña de identidad del aspecto. Excepto en el plano general, la cámara está baja y oblicua, mirando a través del plano de la interfaz:
- Inclina el plano hacia atrás 30–50° (cabeceo), de modo que el lado lejano de la interfaz retroceda y el lado cercano se cierna.
- Gíralo en el plano 10–20° antes de inclinar, para que las líneas de texto corran en diagonal. Cambia el signo entre planos consecutivos.
- Añade un poco de guiñada, ±5–15°, para que un lado del encuadre esté más cerca que el otro.
- Usa una perspectiva algo corta para que la reducción de escala sea obvia: el texto cercano debe tener aproximadamente 1.4–1.8× el tamaño del texto lejano en el mismo encuadre. Una distancia de perspectiva de aproximadamente 0.6–0.75× el ancho del encuadre funciona (1100–1400 px a 1080p).
- El plano general es la excepción: casi frontal, cabeceo de 8–12°, sin rotación en el plano, guiñada dentro de ±3°.
- Encuadre: recorta agresivamente. Los bordes de la losa salen del encuadre o caen en negro. Deja un amplio espacio negro: un cuarto o la mitad del encuadre suele ser el vacío, o una interfaz tan desenfocada que se lee como textura.
Movimiento de cámara
Cada plano es un movimiento continuo. Está motivado: la cámara se desplaza hacia donde aparecerá lo siguiente.
- Desplazamiento a lo largo de la dirección de lectura de la acción: 3–10% del ancho del encuadre durante un plano típico, hasta 20–35% para un paneo largo a lo largo de un diff o un documento.
- Sigue el contenido a medida que crece: cuando una respuesta se transmite hacia abajo, desplázate hacia abajo con ella; cuando se escribe una línea, desplázate con el cursor.
- Empuja suavemente, un cambio de escala del 1–5% durante el plano. Las salidas son raras.
- Gira ligeramente, un cambio de 0.5–4° de balanceo o guiñada durante el plano.
- Velocidad: velocidad constante (lineal) o una breve llegada con desaceleración suave durante el primer tercio que luego continúa a un desplazamiento constante y lento. La cámara nunca se desacelera hasta detenerse por completo y aún se mueve en el corte. Sin ruido de cámara en mano, sin sacudidas.
- Cambio de foco con la acción: cuando la atención pasa de la línea escrita a la respuesta, o de un título al cuerpo, desliza la banda focal allí durante 0.4–0.8 s.
3. Luz y gradación: un vacío negro
Cada plano debe parecer filmado en el mismo escenario. Los valores están en references/look.md.
- Escenario: negro real alrededor del producto. Sin fondo de pantalla degradado, sin neblina de color, sin suelo.
- Luz del sujeto: un foco suave y neutro sobre el sujeto, no sobre el encuadre. La interfaz se desvanece a negro dentro de aproximadamente un tercio del ancho del encuadre desde el punto focal. El foco yace en el plano de la interfaz, por lo que la inclinación lo acorta en perspectiva y el balanceo lo coloca a lo largo de la diagonal. Es más largo a lo largo de la línea de acción, tiene un punto caliente desplazado hacia una clave fuera del eje (el lado de la clave cambia con la diagonal) y, a veces, tiene un lado cortado por una bandera suave. Sigue al sujeto con un ligero retraso, se desliza con un cambio de foco y se abre a medida que el contenido crece y en el clímax. Nunca es un círculo centrado que se ve igual en cada plano. No hay luz de color clave.
- Subexpuesto: el encuadre promedio es muy oscuro (aproximadamente 7–10% de luminancia). Los píxeles brillantes se reservan para el texto enfocado y la interfaz de color del propio producto. Cualquier cosa brillante y desenfocada se atenúa.
- El producto es una losa oscura: su propio cromo, esquinas redondeadas y un sutil borde de 1 px de alto en los paneles. Mantén la interfaz real fiel; no la rediseñes.
- El color pertenece al producto: iconos de estado, verdes y rojos de diff, un botón primario de color de marca. No añadas ningún acento propio: sin destellos, sin resplandores, sin anillos, sin luz teñida.
- Acabado: desenfoque de movimiento (obturador de 180°, 4+ subfotogramas) y grano de película fino en el renderizado final. Junto con la profundidad de campo, estos tres hacen casi todo el trabajo.
4. Movimiento dentro del plano
- Sin cursor. La interfaz actúa por sí sola. Un elemento de navegación se resalta. La píldora de selección de una pestaña se desliza. Un botón se hunde. Un control de margen aparece en una línea de código y la línea se resalta. Si un clic debe leerse, muéstralo a través del propio estado presionado o seleccionado del control.
- Escritura: 12–13 caracteres por segundo con un cursor visible. Los identificadores de código y las referencias a archivos se convierten en chips en línea a medida que se escriben. Al enviar, el compositor se limpia y el mensaje se mueve al hilo.
- Transmisión: el texto generado se resuelve línea por línea, de arriba abajo. Cada línea llega como un fino punteado de puntos que se condensa en glifos sólidos en aproximadamente 0.5 s, escalonados aproximadamente 0.1 s por línea. Los iconos y avatares se resuelven de la misma manera.
- Escritura: los documentos y diagramas se construyen en orden: un título, luego un encabezado, luego párrafos; nodos de diagrama, luego conectores dibujados, luego etiquetas.
- Desplazamiento: en planos medios y generales, el contenido puede desplazarse suavemente bajo una cámara en movimiento. Esta es la segunda capa de movimiento y debe sentirse como la velocidad de lectura.
- Aparición: los paneles y mensajes nuevos aparecen y se elevan ligeramente a través de un pequeño desenfoque con una desaceleración suave de 0.3–0.5 s. Nada aparece con sobreimpulso.
- Sin efectos de impacto. El clímax se muestra por la escala (el plano general) y por la cantidad que cambia, no por sacudidas, destellos o anillos.
5. Final: texto, luego un logotipo estático
- Abandona el último plano de interfaz con un corte brusco a negro, o un rápido desenfoque y oscurecimiento de 0.4 s hacia el negro.
- El texto: una línea centrada sobre negro, de aproximadamente 80–100 px a 1080p, peso 500, tracking de aproximadamente −0.02em, blanca. Llega desenfocándose desde aproximadamente 16 px mientras aparece gradualmente durante 0.6–1 s. Establece toda la línea a la vez, o establece primero el nombre del producto y luego agrega el eslogan en la misma línea, dejando que la línea se centre de nuevo a medida que crece. Un tenue resplandor suave detrás del tipo puede asentarse a medida que se define; nada lo cruza. Mantén durante 3–5 s.
- El logotipo: corta o funde brevemente (aproximadamente 0.3 s) al logotipo estático, ya sea solo la marca o la marca y el logotipo de texto, de aproximadamente 110–120 px de alto a 1080p, en blanco simple. No se mueve, late ni brilla. Manténlo durante 4–5 s y termina la película en él.
No añadas botones de CTA, tarjetas de URL o pancartas de "disponible ahora" a menos que se solicite.
6. Sonido
No hay música: sin partitura, sin zumbido, sin ritmo, sin crescendos, sin bramidos y sin sonidos tonales. La banda sonora es un foley táctil y silencioso sobre un casi silencio.
Cada acción visible recibe una señal: un suave tic de tecla por carácter escrito, un clic suave cuando se selecciona una pestaña o elemento, un silbido silencioso al enviar y un tenue siseo granular debajo del texto que se transmite. El clímax no tiene impacto. El texto y el logotipo se reproducen en silencio.
No hacer
Estos hacen que una película parezca un tutorial o una plantilla:
- Aperturas en frío, tarjetas de título o pantallas de "Presentamos…" y "Novedades en…" antes de la acción.
- Superposiciones de teclas, subtítulos, flechas de llamada o etiquetas que explican la interfaz.
- Un puntero de ratón visible que dirige la acción, o un cursor que viaja entre objetivos.
- Primeros planos planos y frontales. Fuera del plano general de clímax, la cámara mira a través de la interfaz, no directamente hacia ella.
- Todo enfocado. Si el encuadre no tiene bokeh, el plano es demasiado amplio o la banda focal es demasiado profunda.
- Disolvencias o fundidos a negro entre planos de interfaz. Los planos de interfaz usan solo cortes bruscos.
- Movimientos rápidos, órbitas lentas, grandes rotaciones 3D, vuelos en picado, sacudidas de cámara o una cámara que se desacelera hasta detenerse.
- Cortar a una cuadrícula. Los planos de dos segundos uno tras otro se leen como un carrete de efectos; deja que los planos de proceso respiren.
- Rediseñar la interfaz del producto para que parezca "cinematográfica". Mantén la interfaz real fiel y obtén el cine de la cámara, el enfoque y la luz.
- Destellos anamórficos, resplandor, anillos de acento, luz de color clave o cualquier color que el producto ya no tenga.
- Luz que se mueve a través del encuadre: bandas de brillo, barridos o barras de luz que viajan sobre la interfaz. La luz sigue al sujeto; no actúa.
- Un foco de luz que es un círculo en el espacio de la pantalla, centrado e idéntico en cada plano. Se lee como una superposición negra con un agujero, no como luz sobre la losa.
- Una revelación de logotipo animada.
- Música de cualquier tipo, incluida una partitura, un ritmo, un zumbido, crescendos, bramidos o campanas.
7. Verifica como un director de fotografía
Renderiza un fotograma fijo en medio de cada plano, en el pico de cada acción, en el clímax y en los fotogramas de texto y logotipo. Evalúa cada uno como una captura de fotograma de una película:
- Hay exactamente un sujeto nítido, y el ojo se posa en él en menos de medio segundo.
- La banda focal es fina, con bokeh tanto cercano como lejano, excepto en el plano general.
- El plano se lee como inclinado: el texto corre en diagonal y visiblemente se empequeñece hacia la distancia.
- El texto enfocado es legible a media resolución.
- Al menos una cuarta parte del encuadre es negro o casi negro.
- Los planos consecutivos difieren en escala o en la dirección de la diagonal.
- Cada fotograma comparte el mismo nivel de negro, luz neutra y grano, pero la forma del foco cambia con cada cámara: acortado en perspectiva, estirado a lo largo de la acción e iluminado desde un lado.
- Elige el fotograma más fuerte como póster.
Itera hasta que cada fotograma fijo pueda ser una captura de pantalla en una publicación de lanzamiento.