Capacidad C27 · Nivel 3

Ilustración animada de marca

El catálogo tenía anotado Lottie como dependencia. No se ha usado — y no por purismo: estas tres ilustraciones juntas pesan menos que el reproductor, antes de contar el archivo que ese reproductor tendría que descargar.

Tres piezas, tres mecanismos

Todo lo de abajo es SVG del DOM y CSS

El faro de la marca dibujándose trazo a trazo

A · El trazo que se dibuja

El contorno se pinta solo y después entra el relleno. Es la animación de marca más usada, y son dos propiedades: stroke-dasharray y stroke-dashoffset.

Sin una línea de JavaScript

El faro barriendo la costa con su haz de luz

B · El barrido del faro

El gesto que la marca ya tiene. Un cono que rota alrededor de la lámpara y se va del cuadro solo, porque el SVG recorta al viewBox.

Un @keyframes de tres líneas

Cuatro barras creciendo de forma escalonada Mes 1 Mes 2 Mes 3 Mes 4

C · Los datos que se ordenan

Barras que crecen escalonadas con el mismo stagger de 60 ms del sistema de movimiento. Y los rótulos son <text> real: Ctrl+F los encuentra.

4 rectángulos y un scaleY

Los números que tienes que elegir tú

Mira y mueve. El código no puede decidir esto

Qué tienes que mirar

Cuatro cosas

  1. El barrido, un rato largo. Es lo único que se repite eternamente en una web: si a los treinta segundos cansa, el número está mal. Mueve la duración hasta que puedas ignorarlo.
  2. Dale a «repetir» y mira el orden del trazo del faro. ¿Se dibuja como lo dibujarías tú, o hay un trazo que llega tarde?
  3. Selecciona los rótulos «Mes 1… Mes 4» con el ratón. Se seleccionan: son texto, no una imagen.
  4. Y la pregunta de fondo: ¿esto parece de la marca, o parece una plantilla? Es lo único que no puedo comprobar yo.

Por qué no hay Lottie aquí

  • Lottie es un formato compilado, no un formato de autor. Su valor real es el puente After Effects → bodymovin → JSON.
  • Faro no tiene ese puente. Sin motion designer y sin After Effects, la ilustración hay que escribirla igualmente — y escribir JSON de Lottie a mano es absurdo cuando el SVG es el original.
  • El coste sería doble: el reproductor más el JSON, para conseguir lo que ya se ve arriba.
Sexta de seis. C25, C22, C23, C30, C29 y ahora C27: seis veces que la dependencia anotada en el catálogo no hacía falta al construir. La dependencia se declara AL CONSTRUIR, nunca al catalogar.
Y el caso en que Lottie SÍ es la respuesta correcta, para no caer en el dogma contrario: cuando el cliente trae el .json — se lo hizo su agencia, o lo compró. Ahí no se re-dibuja nada: se reproduce. Es la misma excepción que three.js con un modelo glTF: la dependencia se gana cuando existe un activo externo que sin ella no se puede abrir.

Qué separa una ilustración de marca de un adorno

  • Tiene que salir de la marca. El barrido de arriba no es un efecto elegido: es el gesto que el logo de Faro ya contiene. Un logo distinto pide otra animación.
  • Tiene que decir algo. La pieza C no es «unas barras»: es esto sube mes a mes, que es el argumento entero.
  • Y tiene que sobrevivir apagada. Con prefers-reduced-motion se ve el fotograma final, no un hueco.
Ese último punto es un fallo real que se evitó a propósito. Poner animation:none sin más dejaría la pieza A en blanco (el trazo empieza con dashoffset:1, o sea invisible) y la C sin barras (empiezan en scaleY(0)). Eso no es degradar: es romper la página justo para quien pidió menos movimiento.
EnfoqueLo que descarga el visitante
SVG + CSS (esta página)2.881 bytes los tres dibujos · 0 KB de librería
Lottiereproductor + un .json por pieza
GIFcientos de KB, y borroso al ampliar
Vídeono escala, no cambia de color, no es texto