Video · Transiciones
Casi todo es corte seco.
Las otras siete existen por un motivo: aquí las ves moverse, con su duración y el video real que las inspira. Ninguna rebota.
Las ocho, de la más usada a la más rara. Se mueven de una en una: toca la que quieras ver armada.
01 · Corte seco
El corte seco es la base.
No dura nada y no estorba. Entre dos ideas del mismo bloque, y entre horas, se corta al final de una frase.
0ms
- Úsalo
- Casi siempre: entre ideas del mismo bloque y entre horas.
- No lo uses
- En medio de una palabra o de un movimiento.
Ver por qué, los fotogramas y de dónde sale
- Úsalo
- Entre ideas del mismo bloque y entre horas, como de las 10:47 p. m. a las 9:05 a. m. Corta al final de una frase o de un movimiento.
- No lo uses
- En medio de una palabra o de un movimiento. Tampoco para cambiar de tema: ahí va un fundido.
- Por qué
- El tiempo pasó y nadie necesita un efecto para entenderlo. Con el mismo teléfono en su sitio, el corte se vuelve invisible.
Entre el f 29 y el f 30 no hay ningún cuadro.
Sin curva: el corte no tiene cuadros en medio.
Los fotogramas, a 30 por segundof = fotograma · capturados de la animación de arriba
Arriba, la escena A; abajo, la B. El corte pasa entre el f 29 y el f 30.
De dónde sale
Notion · Presentamos Notion 3.0: Agentes · ver original
Del titular a la interfaz real, corte seco a los 4,0 s. El movimiento vive dentro de la escena, no entre escenas.
02 · Fundido
El fundido avisa que cambió el tema.
Dura 300 ms y solo cambia la transparencia: no hay nada que acelerar.
300ms
- Úsalo
- Cambio de tema o de capítulo, y el cierre.
- No lo uses
- Entre ideas del mismo bloque o hacia un color.
Ver por qué, los fotogramas y de dónde sale
- Úsalo
- Cambio de tema o de capítulo, y el cierre. Con «Reducir movimiento», entre 150 y 200 ms.
- No lo uses
- Entre dos ideas del mismo bloque, hacia negro o hacia un color, o más largo de 12 fotogramas.
- Por qué
- Avisa «empieza otra cosa» sin mover nada, y la voz no se interrumpe.
Duración «fundido»: 9 fotogramas · curva lineal
Curva «lineal»
Los fotogramas, a 30 por segundof = fotograma · capturados de la animación de arriba
La escena B sube de 0 a 100 % sobre la A. Cada fotograma es un paso de 11 %.
De dónde sale
Wendover Productions · Por qué el modelo de negocio de IKEA triunfa · ver original
Wendover pasa de la foto al mapa con una mezcla de medio segundo (de 8,4 a 8,9 s); aquí el mapa aún lleva la luz de la foto en los bordes. Nosotros solo mezclamos, sin desenfoque y en 300 ms.
03 · Empuje corto
El empuje dice: la idea sigue.
La escena nueva entra 40 px desde la derecha y la vieja se va hacia la izquierda. Siempre avanza, nunca vuelve.
≈450ms
- Úsalo
- El paso siguiente de la misma idea: del día 1 al día 2.
- No lo uses
- Hacia atrás, o entre temas distintos.
Ver por qué, los fotogramas y de dónde sale
- Úsalo
- El paso siguiente de una misma idea: del día 1 al día 2. A la izquierda en 16:9 y en cuadrado; hacia arriba en 9:16.
- No lo uses
- Hacia atrás, más de 80 px, o entre temas distintos (ahí va un fundido). Tampoco dos empujes seguidos.
- Por qué
- Son 40 px y no toda la pantalla: basta para decir «sigue». Volver atrás se lee como cancelar.
Duración «entrada»: 14 fotogramas · curva entrada · 40 px
Curva «entrada»
Los fotogramas, a 30 por segundof = fotograma · capturados de la animación de arriba
La línea punteada marca dónde empieza el texto (x 80). Llega rápido y se asienta despacio.
De dónde sale
Notion · New Year. New You. Introducing Notion Faces. · ver original
El texto sale a la izquierda mientras el primer mosaico entra por la derecha, en menos de 0,1 s. Nosotros lo hacemos corto, de 40 px, sin tapar nada.
04 · Máscara
La máscara hace asomar el titular.
Cada línea sube desde su propia línea base, dentro de un recorte. Se mueve una sola cosa y termina pronto.
500ms
- Úsalo
- Titulares y rótulos grandes.
- No lo uses
- Texto chico, párrafos o rebote.
Ver por qué, los fotogramas y de dónde sale
- Úsalo
- Titulares y rótulos grandes, de 96 px o más. Línea por línea, con 3 fotogramas entre una y otra.
- No lo uses
- Párrafos, subtítulos o texto chico. Nunca con rebote al asomar.
- Por qué
- El oído sigue la voz y el ojo lee: una sola cosa se mueve y termina pronto.
Duración «estado»: 15 fotogramas · curva estado · 3 f entre líneas
Curva «estado»
Los fotogramas, a 30 por segundof = fotograma · capturados de la animación de arriba
La raya gris es el borde del recorte; en un video no se ve. La segunda línea empieza 3 f después.
De dónde sale
Notion · Introducing the new Notion AI · ver original
«Meet the new Notion AI» sube desde una línea invisible en 0,33 s y la segunda línea entra 0,08 s después. Nosotros: 500 ms con la curva de estado.
500ms
- Úsalo
- Una escena entera que se descubre: una imagen o un diagrama.
- No lo uses
- Texto largo: se lee a medias.
Ver por qué, los fotogramas y de dónde sale
- Úsalo
- Una escena entera que se descubre de izquierda a derecha: una imagen o un diagrama.
- No lo uses
- Texto largo: se lee a medias mientras se descubre.
- Por qué
- Es la máscara de la escena, no del titular. La escena nueva ya está debajo; solo se destapa.
Duración «estado»: 15 fotogramas · curva estado
Curva «estado»
Los fotogramas, a 30 por segundof = fotograma · capturados de la animación de arriba
La escena B se destapa de izquierda a derecha; la A espera debajo, quieta.
De dónde sale
Notion · Introducing the new Notion AI · ver original
«Meet the new Notion AI» sube desde una línea invisible en 0,33 s y la segunda línea entra 0,08 s después. Nosotros: 500 ms con la curva de estado.
05 · Interruptor de marca
El interruptor une la tensión con el giro.
Es la idea de la marca hecha transición: la perilla sube, el color llega y el fondo se enciende. Una vez por pieza.
500 + 200ms
- Úsalo
- Una vez por pieza, entre la tensión y el giro.
- No lo uses
- Como adorno, o dos veces en la misma pieza.
Ver por qué, los fotogramas y de dónde sale
- Úsalo
- Una vez por pieza, entre la tensión y el giro: «Apagado → encendido». Con el clic suave a −20 dB cuando la perilla llega arriba.
- No lo uses
- Como adorno entre escenas cualquiera, dos veces en la misma pieza, o con otro sonido que ese clic.
- Por qué
- No se explica, se ve. El azul llega último y el fondo lo sigue.
Perilla «estado» 15 f + color «micro» 6 f
Curva «estado»
Los fotogramas, a 30 por segundof = fotograma · capturados de la animación de arriba
La perilla llega arriba en el f 15; el color pasa a azul del f 15 al 21; el fondo se enciende hasta el f 24.
De dónde sale
Notion · Introducing the new Notion AI · ver original
El símbolo se vuelve una ventana azul que crece en 0,2 s: una transición hecha con el propio elemento. Nosotros: la perilla sube y el fondo se enciende.
06 · Elemento compartido
Un solo elemento viaja entre escenas.
El ojo sigue una cosa y entiende «es lo mismo». Todo lo demás se apaga mientras viaja.
500ms
- Úsalo
- Un chip, una cifra o una burbuja que sigue en la escena siguiente.
- No lo uses
- Si el elemento cambia de significado o hay dos candidatos.
Ver por qué, los fotogramas y de dónde sale
- Úsalo
- Un chip, una cifra o una burbuja que sigue existiendo en la escena siguiente: de la burbuja de Rosa al titular.
- No lo uses
- Cuando el elemento cambia de significado, o si hay dos candidatos a viajar. Nunca dos a la vez.
- Por qué
- El resto de la escena A se apaga en 6 f y el de la B entra en 9 f, mientras el chip sube y crece de 2,4× a 3,6×.
Duración «estado»: 15 fotogramas · curva estado
Curva «estado»
Los fotogramas, a 30 por segundof = fotograma · capturados de la animación de arriba
El chip «Asignado a Ana» sube de la burbuja al titular. Ejemplo.
De dónde sale
Notion · Conozca a Custom Agents · ver original
El mismo ícono morado pasa de la mano al tablero: el elemento sigue vivo en la escena siguiente.
07 · Zoom-out al diagrama
El zoom-out lleva del detalle al sistema.
La cámara parte de un detalle y se aleja hasta mostrar el mapa completo: de lo concreto a lo grande, como en Wendover.
700ms
- Úsalo
- Del detalle al sistema completo («así funciona»).
- No lo uses
- Con desenfoque, o de ida y vuelta varias veces.
Ver por qué, los fotogramas y de dónde sale
- Úsalo
- Del detalle («Ana», el chip) al sistema completo: «así funciona». Una vez, y se queda quieto.
- No lo uses
- Con desenfoque de movimiento, ni de ida y vuelta varias veces seguidas.
- Por qué
- Wendover hace lo mismo con un mapa: el detalle prueba y el diagrama ordena. Lo quieto llega primero y lo encendido ya estaba.
Duración «cámara»: 21 fotogramas · curva estado · de 3× a 1×
Curva «estado»
Los fotogramas, a 30 por segundof = fotograma · capturados de la animación de arriba
El nodo 2 (el único encendido) queda siempre a la vista; los otros tres aparecen al alejarse.
De dónde sale
Wendover Productions · Por qué el modelo de negocio de IKEA triunfa · ver original
La foto se acerca, se mezcla con el mapa y la cámara se aleja hasta la vista completa; al final queda solo el logo (25,6 s).
Cuándo usar cuál
Si dudas, corta.
La proporción de la guía de video y, en una tabla, cuándo sí y cuándo no de cada una.
7 cortes2 empujes1 fundidoRegla práctica de la guía de video. Las otras cinco salen una vez por pieza, como mucho.
Ver las ocho en una tabla
Úsala siCasi siempre: entre ideas del mismo bloque y entre horas.
Mejor no siEn medio de una palabra o de un movimiento.
Fundido300 msÚsala siCambio de tema o de capítulo, y el cierre.
Mejor no siEntre ideas del mismo bloque o hacia un color.
Empuje corto≈450 msÚsala siEl paso siguiente de la misma idea: del día 1 al día 2.
Mejor no siHacia atrás, o entre temas distintos.
Máscara500 msÚsala siTitulares y rótulos grandes.
Mejor no siTexto chico, párrafos o rebote.
Interruptor de marca500 + 200 msÚsala siUna vez por pieza, entre la tensión y el giro.
Mejor no siComo adorno, o dos veces en la misma pieza.
Elemento compartido500 msÚsala siUn chip, una cifra o una burbuja que sigue en la escena siguiente.
Mejor no siSi el elemento cambia de significado o hay dos candidatos.
Zoom-out al diagrama700 msÚsala siDel detalle al sistema completo («así funciona»).
Mejor no siCon desenfoque, o de ida y vuelta varias veces.
Corte frío y teaser1,2 s por tomaÚsala siLos primeros segundos de un video largo o de una charla.
Mejor no siCon logo primero o un saludo largo.
Lo que no hacemos
Cinco efectos que no entran, ni una vez.
Se ven bien en una plantilla y mal en una marca que se mueve con calma. Aquí corren al lado de lo que sí hacemos.
Glitch con aberración cromática
Por qué no. Nuestro sistema es calma: «apagado → encendido». El glitch grita, compite con la frase y es el sello de otros canales. En Diary of a CEO aparece al entrar la apertura; nosotros cortamos y listo.
Ver cómo lo usa Diary of a CEO
The Diary of a CEO · MrBeast: Si quieres caer bien, no ayudes a la gente… · ver original
Así lo usa Diary of a CEO en su apertura (2,5 s): franjas movidas y bordes de color. No lo copiamos.
Corte seco: la misma frase, sin efecto.
La imagen se parte en franjas y el rojo y el azul se corren.
Rebote
Por qué no. Nada rebota. Un interruptor de verdad sube una vez y queda ahí. El rebote es de juguete; nosotros somos una herramienta seria que se mueve con calma.
Llega rápido y se asienta en su sitio, sin pasarse de la raya.
La escena llega, se pasa de su sitio y vuelve.
Giro 3D
Por qué no. Marea y no cuenta nada. Una transición tiene que decir algo («cambió el tema», «sigue la idea»); un giro solo dice «mira el efecto».
Fundido de 300 ms: la idea cambia, no gira.
La escena gira en perspectiva, como una carta.
Flash blanco
Por qué no. Un fundido o un flash hacia el blanco se siente como un fogonazo en un teléfono de noche. Aquí la escena de la noche es oscura a propósito: ahí se nota.
De oscuro a claro, corte seco en un cambio de frase.
Un cuadro en blanco entre dos escenas.
Whoosh en cada corte
Por qué no. El único sonido de marca es el clic del interruptor, a −20 dB. Los whoosh en cada corte son el sello de Diary of a CEO, no el nuestro.
Los cortes van en silencio; suena un solo clic suave cuando la perilla llega arriba.
Un barrido de sonido en cada corte (aquí dibujado como onda).
Ritmo
Abren rápido y el cuerpo respira.
En las charlas se pasa de 36 a 50 cortes por minuto a solo 3 o 4. Nosotros abrimos con 24 y bajamos a 12.
Así se siente cada ritmo
Cada marca es un corte real. Toca «Repetir» para ver cómo se acumulan en los primeros 60 segundos.
Dónde cae cada transición en un explicativo de 2 minutos
Plan de ejemplo de un explicativo de 2 minutos: unos 27 cortes (6 en los primeros 15 s y el resto cada 5 s) y solo tres transiciones con nombre. Las marcas muestran la proporción, no una medición.
Ver los 15 videos medidos
Medimos los cortes de los primeros ~58 segundos de ocho videos y de seis de Notion. En las charlas se pasa de 36 a 50 cortes por minuto a solo 3 o 4; Wendover casi no cambia; Notion abre con 14 a 21, salvo su campaña de 30 s (36).
Medido a mano sobre los cuadros reales. En Notion solo se midió la apertura, y el medidor cuenta también el texto enorme que se escribe: ahí es un tope, no un conteo exacto. La franja azul es el rango de nuestro explicativo: de 24 por minuto al abrir a 12 en el resto.
Estilo de Notion
Notion mueve dentro de la escena.
Seis videos de su canal oficial: cortan poco y dibujan el producto como se usa. Esto tomamos, en blanco, grises y un solo azul.
Una sola cosa abreEl símbolo y un cursor sobre fondo casi blanco, 1,2 s, sin título. El clic es el primer movimiento.
El titular sube desde una máscaraDos líneas escalonadas; se sostiene de 1,8 a 2,3 s y se corta. Sin rebote.
Una palabra enfatizada«new» se subraya con un trazo que se dibuja de izquierda a derecha en 0,45 s.
El producto se dibuja como se usaEl texto se escribe letra por letra con cursor, a unas 15 letras por segundo, y la cámara lo sigue.
Acercamiento a lo que importaUnos 0,3 s hacia la lista de tareas; el resto queda fuera de cuadro.
Cierre con el símbolo soloFrase corta, el símbolo y su nombre durante ~1 s. Nunca hay logo fijo durante el video.
Ver lo que medimos y lo que hacemos
| Rasgo | Notion (medido) | Nosotros |
|---|---|---|
| Cortes | Corte seco casi siempre; solo de 2 a 8 cambios graduales por video. | Corte seco por defecto y como máximo dos transiciones distintas por pieza. |
| Titular | Sube desde una máscara en 0,33 a 0,4 s; la 2.ª línea entra 0,08 s después. | Sube desde la línea en 500 ms (curva estado); la 2.ª línea, 3 f (100 ms) después; sale en corte. |
| Énfasis | Subrayado hecho a mano que se dibuja en 0,45 s. | Subrayado azul que se dibuja de izquierda a derecha en 400 ms (12 f). |
| Texto que se escribe | Unas 15 letras por segundo, con cursor. | 60 a 70 ms por letra; una frase completa en 2 s como máximo, con cursor visible. |
| Acercamiento | Unos 0,3 s al detalle que importa. | 700 ms (21 f), curva estado, una vez y quieto, sin desenfoque. |
| Apertura | Símbolo y cursor, 1,2 s; el cubo se vuelve ventana azul en 0,2 s. | Una sola cosa en pantalla; el interruptor sube 500 ms y el fondo se enciende. |
| Ritmo | Un plano típico dura de 2,3 a 3 s en cuatro de los seis videos (en los dos de 30 s, cerca de 1 s); de 50 a 90 % del cuadro casi blanco en cinco. | Una idea cada 2,5 a 4 s en piezas gráficas; de 50 a 80 % del tiempo la imagen casi no se mueve. |
| Cierre | Frase corta, cubo solo y «Notion» durante ~1 s. | Frase corta y símbolo solo durante ~1 s; el personaje, solo aquí. |
No copiamos: un color de fondo por función (aquí hay un solo azul por vista), los rojos, amarillos y naranjas, el serif y la cursiva en titulares, el desenfoque de movimiento, las rayitas de velocidad ni las fichas inclinadas.
Descargar
Llévate la hoja y los valores.
Hoja de transiciones
Un solo archivo HTML, sin internet: las ocho y los cinco «no», en vivo. Para enseñárselo al equipo.
Hoja de transiciones (HTML)Código de Remotion
Los archivos del kit que dibujan las transiciones, con un LEEME.
Kit de Remotion (ZIP)