# Motion branding: cómo se mueve una marca, no solo cómo se ve

[Canonical HTML page](https://gradiently.design/es/guide/motion-branding-guide)

Dos marcas pueden compartir tipografía y color y no parecerse en nada cuando se mueven. El movimiento es la parte de la identidad que la mayoría de las marcas dejan al azar.

## The short version

- El motion branding es el conjunto de reglas sobre cómo se mueven el logo, la tipografía, los fondos y la interfaz de una marca.
- Las decisiones clave son el ritmo, las curvas de aceleración, la dirección y qué elementos pueden moverse.
- El movimiento de una marca debe encajar con su carácter: las marcas tranquilas se mueven despacio y con suavidad, las enérgicas más rápido y con más rebote.
- Las reglas de movimiento son más útiles escritas como unas pocas duraciones y curvas con nombre que comparten diseño y desarrollo.
- Un buen motion branding siempre incluye una versión con movimiento reducido para quienes piden a sus dispositivos menos movimiento.

El **motion branding** es la parte de una identidad que describe cómo se mueve la marca: a qué velocidad pasan las cosas, cómo aceleran y frenan, en qué dirección viajan y qué puede moverse. Un logo que encaja de golpe dice algo distinto que uno que entra flotando. Escrito como un puñado de reglas, el movimiento hace que cada vídeo, historia, web y app parezcan de la misma marca, aunque cambien los colores y las composiciones.

## Por qué el movimiento forma parte de la identidad de marca

La mayoría de los manuales de marca se quedan en logo, color y tipografía, porque se escribieron para impresión. Hoy la gente suele encontrarse con una marca en movimiento: en un Reel, una historia animada, el hero de una web, la interfaz de un producto. Si nadie decide cómo se mueven esas cosas, lo decide cada diseñador y cada herramienta, y la marca empieza a comportarse como varias empresas distintas.

Incluso una marca casi siempre estática sale ganando. Una sola regla, como «las palabras llegan subiendo con suavidad, nunca girando», evita mucho trabajo fuera de marca antes de que empiece. Si tu marca nunca se ha movido, [motion graphics para marcas](https://gradiently.design/es/guide/motion-for-still-brands) es un buen punto de partida.

## Las cuatro decisiones del motion branding

1. **Ritmo.** Cuánto tardan las cosas. Las duraciones cortas resultan eficientes y vivas; las largas, tranquilas, meditadas o lujosas.
2. **Curvas de aceleración.** Cómo acelera y frena el movimiento. Una salida suave resulta natural; un ligero rebote, juguetón; lo lineal, mecánico. Mira las curvas en [easing](https://gradiently.design/es/guide/easing).
3. **Dirección y comportamiento.** ¿Las cosas suben, se deslizan, escalan, se funden o se revelan? Elige dos o tres comportamientos y úsalos con coherencia.
4. **Qué se mueve.** Decide qué elementos pueden moverse: el fondo, las palabras, el logo, las fotos. La contención aquí es la mayor diferencia entre lo premium y lo recargado.

| Carácter | Ritmo | Curva | Comportamiento típico |
| --- | --- | --- | --- |
| Tranquilo, premium | Lento, de 400 a 700 ms | Salida suave | Fundidos, subidas lentas, color que deriva |
| Seguro, editorial | Medio, de 250 a 400 ms | Salida firme | Cortinillas, deslizamientos limpios, cortes al compás |
| Juguetón, cercano | Rápido, de 200 a 350 ms | Salida con rebote | Apariciones, botes, entradas con escala |
| Técnico, preciso | Rápido, de 150 a 250 ms | Entrada y salida marcadas | Deslizamientos rectos, texto de máquina de escribir |

Puntos de partida para el movimiento de interfaz y de texto. El movimiento de fondo y ambiental es mucho más lento, se mide en segundos.

Las ideas de base, como el tiempo, la jerarquía y la continuidad del movimiento, se explican en [principios del diseño de movimiento](https://gradiently.design/es/guide/motion-design-principles). El motion branding consiste en elegir entre ellas y comprometerse.

## Escribir reglas de movimiento que compartan diseño y desarrollo

Las guías de movimiento fracasan cuando se escriben con adjetivos. «Fluido y seguro» significa algo distinto para cada persona. Nombra unas pocas duraciones y unas pocas curvas, dáselas a diseño y desarrollo con las mismas palabras, y la marca se moverá igual en un editor de vídeo y en el código.

```css
:root {
  /* Pace */
  --motion-quick: 180ms;
  --motion-base: 320ms;
  --motion-calm: 600ms;
  --motion-ambient: 12s;

  /* Easing */
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);   /* soft ease out */
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);    /* ease in out */
  --ease-leave: cubic-bezier(0.7, 0, 0.84, 0);    /* ease in */
}

.headline-enter {
  animation: rise var(--motion-base) var(--ease-arrive) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .headline-enter { animation: none; }
}
```

El movimiento de una marca como tokens. Tres duraciones, un ritmo ambiental y tres curvas con nombre cubren casi todo.

Fíjate en la última regla. A algunas personas el movimiento las distrae o les sienta mal, y piden a su dispositivo que lo reduzca. Una marca en movimiento completa define qué ocurre entonces, normalmente un fundido sencillo o ningún movimiento. [Movimiento reducido](https://gradiently.design/es/guide/reduced-motion) explica cómo.

## El movimiento en los recursos de una marca

| Recurso | Qué definir | Regla de ejemplo |
| --- | --- | --- |
| Logo | Su entrada, su estado en reposo, cuánto tiempo se mantiene | Se dibuja en 800 ms, se queda quieto, nunca en bucle |
| Tipografía | Uno o dos estilos de entrada | Los titulares suben; las líneas secundarias se funden un instante después |
| Fondos | Velocidad, dirección, si van en bucle | El color deriva despacio y se repite cada 12 segundos |
| Transiciones | Cómo una escena o página sustituye a otra | Cortinilla en el sentido de lectura, nunca un giro |
| Interfaz | Hover, pulsar, abrir y cerrar | Los paneles se abren con la duración base y se cierran más rápido |

Basta una fila por recurso. Si una regla necesita un párrafo para explicarse, probablemente es demasiado complicada.

El logo suele recibir la mayor atención y es lo que menos aparece. Los fondos y la tipografía están en pantalla mucho más tiempo, y ahí es donde la coherencia compensa. Para el logo en sí, [logo animado](https://gradiently.design/es/guide/animated-logo) repasa los enfoques principales.

Diseño vertical con un titular editorial sobre hacer las cosas despacio, sobre un degradado que deriva suavemente

Una marca tranquila: duraciones largas, color que deriva, palabras que aparecen con un fundido y se quedan.

Diseño vertical de lanzamiento de producto con el texto Ya está aquí, color vivo y una composición rotunda

Una marca juguetona: ritmo más rápido, palabras que aparecen con rebote, movimiento más vivo en el fondo.

## Fondos que se mueven como tu marca

El movimiento más visible en la mayoría del contenido de marca es el fondo: el color en movimiento detrás de una historia, un Reel o un hero. También es el movimiento que las marcas toman prestado de bancos de imágenes con más frecuencia, lo que significa que no es de nadie. Un fondo cuyos colores, luz, grano y movimiento son todos tuyos hace más por el reconocimiento que una animación de logo elaborada que se ve una vez.

Un campo de color de marca: `radial-gradient(110% 80% at 70% 30%, #a7f3d0 0%, #10b981 35%, #065f46 70%, #022c22 100%)`

Un fondo así, que se mueve despacio y siempre de la misma manera, llega a ser tan reconocible como un logo.

Así funcionan los Marks en Gradiently. Un Mark es una receta de colores, materiales, luz, grano, movimiento y una voz tipográfica, así que su movimiento forma parte de su identidad y no es un efecto que se añade. Cada diseño que lo lleva, de una historia a una diapositiva, se mueve igual, y como cada Mark es único y tiene un solo dueño, el contenido de nadie más se mueve exactamente como el tuyo. [Sistemas de degradados de marca](https://gradiently.design/es/guide/brand-gradient-system) explica cómo construir el color a su alrededor.

### Movimiento fuera de marca

- Cada diseñador elige sus propias transiciones
- Todos los elementos se animan a la vez
- Fondos animados de bancos de imágenes
- Guías escritas solo con adjetivos
- Ningún plan para el movimiento reducido

### Motion branding

- Dos o tres comportamientos con nombre, usados en todas partes
- Se mueve una cosa cada vez, en orden
- Un fondo que pertenece a la marca
- Duraciones y curvas con nombre en tokens compartidos
- Una alternativa definida, estática o con fundido

## FAQ

### ¿Qué es el motion branding?

El motion branding es el conjunto de reglas sobre cómo se mueve una marca: su ritmo, sus curvas, su dirección y qué elementos pueden moverse. Hace que vídeos, publicaciones, webs y apps parezcan una sola marca.

### ¿Qué debe incluir una guía de movimiento de marca?

Unas pocas duraciones con nombre, unas pocas curvas, dos o tres comportamientos de entrada, reglas para el logo, la tipografía, los fondos y las transiciones, y qué pasa cuando alguien prefiere movimiento reducido.

### ¿A qué velocidad deben ir las animaciones de marca?

El movimiento de interfaz y de texto suele estar entre unos 150 y 700 milisegundos, más rápido en marcas enérgicas y más lento en las tranquilas. El movimiento de fondo es mucho más lento, se mide en segundos.

### ¿Una marca pequeña necesita motion branding?

Una versión breve ayuda a cualquier marca que publique vídeos o historias. Incluso una regla sobre cómo entran las palabras y un fondo en movimiento mantienen la coherencia del contenido.