Motion

Así se mueve Carvuk. Cada animación lleva algo de pendiente a listo, con la seguridad de un buen conductor: arranca suave, frena firme y no hace más de lo necesario.

Lo dejamos listo

Nuestro trabajo es resolver: agendar, revisar, pagar, avisar. El motion cuenta eso mismo. Cada movimiento parte de algo pendiente y termina con algo resuelto, sin adornos ni vueltas.

Para explicar cómo se mueve pensamos en un auto bien manejado. Arranca suave, frena firme y, si viene con impulso, pasa apenas de su lugar y se asienta. Lo que va detrás llega un instante después, como de arrastre. Esa física hace que nuestras animaciones se sientan seguras y no mecánicas.

Niveles de energía

Todo lo que se mueve en Carvuk parte de una de estas tres curvas. Cada una transmite una sensación distinta: elige la que acompaña lo que dice el mensaje.

La curva es la base. En qué punto entra, la velocidad y el recorrido se ajustan pieza a pieza según lo que se esté contando.

DirectoSeguro y sereno. Llega sin dudar y se queda quieto. Transmite control: todo está en orden y no hay sorpresas.
EstándarÁgil y cercano. Llega con un poco de impulso y se acomoda. Se siente vivo sin pedir atención.
ExpresivoCon peso y entusiasmo. Se toma su tiempo, pasa de largo y vuelve a su lugar. Se siente grande, como algo que vale la pena mirar.

A mitad de camino

La curva completa es el principio, pero casi nunca la mostramos entera. Lo que aparece entra a mitad de camino, ya en movimiento, como un auto que llega al cuadro andando y frena. Lo que sale arranca y lo cortamos en plena aceleración.

Así nada se queda esperando en pantalla y cada corte se siente con energía, como en el montaje de un buen video.

EntradaAparece cuando la curva ya va rápido y solo vemos cómo frena y se asienta.
SalidaArranca suave, gana velocidad y la cortamos antes de que termine.

Tipografía en movimiento

Distintas formas de animar texto. Las que se mueven siguen la misma física: aparecen a mitad de camino, llegan a su lugar y salen cortadas.

Elige la que acompaña el ritmo de la pieza. Se pueden combinar, pero una frase usa una sola.

El ritmo lo da la frase. Hacemos una pausa donde la frase respira, como al hablar, para que la idea se entienda antes de seguir: Lo dejamos listo, pausa, antes de tu café.

Por palabraNuestra forma por defecto. Cada palabra sube a su lugar un instante después de la anterior, así la frase se lee mientras llega. También funciona por línea o con la frase completa.
LateralCada palabra llega desde la derecha a su lugar y sale hacia arriba como las demás. Da sensación de avance, útil para pasos y secuencias.
CorteCada palabra aparece de golpe, sin movimiento, al ritmo del montaje. Funciona para enumerar, para cifras y para piezas rápidas. También se puede cortar por línea o por frase.
ÉnfasisLa frase entra por corte y la palabra clave sube con la curva Expresiva. Ya armada la frase, gana peso y color. Nunca cambia de tamaño.
ApiladoCada línea entra desde abajo y empuja a las anteriores hacia arriba. Para pasos, beneficios y listas.
TipeoLas letras aparecen una a una, como al escribir. Lo reservamos para mostrar producto, como una búsqueda.

Cifras

Los números tienen su propia animación. Usamos Manrope con cifras tabulares, así cada dígito ocupa el mismo ancho y la cifra no baila mientras cambia.

RodilloLa cifra avanza a saltos. En cada salto, el dígito nuevo entra desde abajo y empuja al anterior hacia arriba, que se corta antes de salir.
ConteoLa cifra cuenta hasta su valor cuadro a cuadro con la curva Directo. Para datos que crecen, como kilómetros o clientes.

Transiciones

Cambiamos de escena con un corte. Es lo más directo y casi siempre lo mejor: nada de fundidos ni barridos entre escenas.

Cuando hay continuidad entre escenas la aprovechamos. Y si la escena necesita más energía, sale en movimiento antes del corte.

CorteNuestra transición por defecto. Una escena termina y la otra empieza, sin efectos entre medio.
Corte con continuidadLo que se repite entre escenas queda quieto en su lugar y cambia todo lo demás. El ojo sigue la idea a través del corte.
Salida en movimientoLa escena sale hacia arriba o hacia el lado, gana velocidad y la cortamos antes de que termine. La siguiente entra desde abajo.

Cámara

Sobre cualquier animación podemos mover la cámara. Nos alejamos para mostrar el contexto o nos desplazamos para pasar de una idea a la siguiente sin cortar.

La cámara se mueve con la curva Directo, pero lenta: arranca suave, toma velocidad y frena firme en su lugar, sin pasarse. Lo que está en escena sigue moviéndose a su propio ritmo.

Producto en movimiento

Cuando mostramos la app en piezas de marca, el motion cuenta la historia, no copia la interfaz. Simplificamos lo que pasa en pantalla para que se entienda a la primera.

Aquí usamos formas grises para explicar el movimiento. En las piezas reales van las pantallas del producto.

Pantalla desde abajoUna pantalla nueva sube y cubre a la anterior con la curva Directo, y baja por el mismo camino al cerrarse. Para abrir un detalle o un paso.
Pantalla desde el ladoLa pantalla nueva entra desde la derecha y empuja a la anterior. Al retroceder, el movimiento se invierte.
ScrollEl contenido se desplaza lento y con la curva Expresiva, como un scroll real con impulso que se asienta.
DestacarUn elemento crece un poco y se sale de la pantalla para ganar protagonismo. Sube lento con la curva Expresiva, se asienta y vuelve a su lugar por el mismo camino.
Listo
EstadoLos estados cambian como las cifras: el anterior sale hacia arriba y el nuevo entra desde abajo. El color acompaña el avance.
EncuadrePara mostrar un detalle acercamos la cámara a la pantalla y nos alejamos con la misma curva, lento y Directo. La interfaz nunca cambia de tamaño por sí sola.

Qué evitar

Nuestro motion es directo y con peso. Estos recursos lo vuelven blando o decorativo, así que los usamos muy rara vez o nunca.

No escales el contenidoTextos, imágenes y elementos no crecen ni se encogen para aparecer. La excepción son la cámara y los marcos que contienen la escena.
No uses fundidosNada aparece ni desaparece de a poco. Entra de una vez o se corta.
No uses máscaras en el textoEl texto no se revela detrás de un borde. Aparece completo y se mueve poco.
No rebotesUn asentamiento es una sola pasada. Si rebota, se ve como un juguete.

Logo en movimiento

El logo tiene sus propias animaciones, afinadas a mano. Las usamos tal cual, sin sumarles movimientos ni efectos.

IntroPara abrir una pieza. El isotipo sube y empuja al logotipo a su lugar, directo y sin adornos.
OutroPara cerrar una pieza. El punto dibuja la C, toma impulso y empuja al logotipo: la marca queda lista al final.