EL MAPA ✳ ANIMACIONES
Dínamo Sites destripado · 175 secciones · 132 fondos · 40 prompts

La gente no entra por el texto.
Entra por el movimiento.

Un insecto va a la luz. Una persona va a lo que se mueve. Tu concesionaria por la ruta funciona por eso: el auto avanza y el ojo lo sigue. Las páginas quietas no compiten contra eso.

Acá abajo están las animaciones de Dínamo ordenadas por rubro, corriendo en vivo. Una por oficio. Con el pedido listo para copiar.

7 rubros 7 animaciones en vivo costo real de cada una sin librerías pesadas
El hallazgo

La animación no pesa. Lo que pesa es no tenerla.

Entré al código de las secciones de Dínamo. Las que se ven caras están hechas con CSS puro: son un archivo de texto de 16 KB, sin librerías. Es como una receta escrita a mano en una servilleta: no necesitás una cocina industrial para que salga bien.

16 KBpesa una sección animada completa de Dínamo. Menos que una sola foto de celular.
0librerías externas en la mayoría. Nada de esperar que baje un programa para ver el movimiento.
1solo gesto por sección. No es un circo: es un movimiento bien elegido, repetido con calma.
Traducido: nuestras páginas quietas no pierden por diseño ni por fotos. Pierden porque no respiran. Y respirar sale casi gratis.
Los 4 motores

Toda animación de Dínamo sale de cuatro motores.

Si entendés los cuatro, después elegís para cualquier rubro sin copiar a nadie. Como un electricista que sabe qué cable va a cada toma.

A

CSS puro

Cosas que aparecen, giran, se corren o respiran solas. Es el motor más usado por Dínamo.

Peso: casi cero · Dificultad: baja · Ejemplo: el estante que se arma
B

Dibujo de línea (SVG)

Una línea que se va dibujando sola: un plano, una ruta, una firma, un gráfico. Parece que alguien lo está escribiendo delante tuyo.

Peso: 2-5 KB · Dificultad: media · Ejemplo: el auto por la ruta
C

Video de fondo

Un clip de 5 a 10 segundos que se repite sin ruido. Es el que hace decir “esta marca es grande”.

Peso: 1-3 MB · Dificultad: baja · Ejemplo: la portada de la concesionaria
D

Canvas o WebGL

El fondo que reacciona al mouse, como líquido o metal. Es el más caro y el más delicado. Solo para la portada estrella.

Peso: 30-200 KB + placa de video · Dificultad: alta · Usar con cuidado
El mapa · 7 rubros

Cada oficio tiene un gesto que lo representa.

No es “poner una animación linda”. Es elegir el movimiento que dice de qué se trata el negocio. Abajo de cada una está el pedido para copiar y pegar.

01 · FERRETERÍA Y HOME CENTER

El estante que se arma

Mientras la cinta métrica se desenrolla, los productos caen en su lugar.

Una ferretería se trata de medidas y de surtido. Por eso el gesto son dos cosas juntas: la cinta que se estira y las piezas que se acomodan solas, como cuando llenás la vidriera a la mañana.

Sirve para la grilla de ofertas y para las ocho categorías de arriba. Es el gesto más barato de todos y el que más se nota.

Dónde va: grilla de productosDispara: al scrollear
Peso real: menos de 2 KB. No toca las fotos ni el buscador.

Animá la grilla de productos con CSS puro, sin librerías. Cuando la grilla entra en pantalla, cada tarjeta cae desde arriba 70px con una inclinación de 9 grados y vuelve a su lugar en 0,55 s, una atrás de otra cada 110 ms. Detrás de las tarjetas, una cinta métrica horizontal se desenrolla de izquierda a derecha con marquitas cada 22px. Arriba de la grilla, un título corto. Nada más se mueve. Respetá prefers-reduced-motion.
En vivo
02 · CONCESIONARIA

El auto por la ruta

La ruta se dibuja sola y el auto la recorre. El mismo gesto de tu modelo que ya funciona.

Un auto no se vende quieto en una foto: se vende andando. La línea se va dibujando como un camino en el mapa y el punto de luz la recorre. El ojo no puede dejar de seguirla: es la misma razón por la que mirás un auto que pasa por la calle.

Es el único rubro donde la animación es el producto. Acá sí conviene gastar: ruta dibujada, y si el cliente paga, video de fondo.

Dónde va: portadaDispara: solo, en loop
Peso real: 4 KB en SVG. Sumale 1-3 MB si querés video de fondo.

Portada de concesionaria. Un SVG con una ruta curva que cruza la pantalla de izquierda a derecha. La ruta se dibuja sola: el trazo arranca vacío y se completa en 4 s, con stroke-dasharray sobre pathLength=1. Un punto de luz tamaño 20px, color lima, recorre exactamente esa misma ruta con offset-path y offset-distance de 0% a 100% en el mismo tiempo. A la derecha, un contador de kilómetros que sube mientras el auto avanza. Título grande a la izquierda, dos botones: Ver stock y Financiación. Loop de 6 s y respetá prefers-reduced-motion.
En vivo
KILÓMETROS18.400
03 · TIENDA DE ROPA

El perchero que corre

Las prendas pasan colgadas y se mecen apenas. El movimiento es el de la ropa, no el de la pantalla.

En una tienda de ropa la gente toca, corre el perchero y mira cómo cae la tela. Esa es la animación: un riel que corre despacio y prendas que se mueven un poco, como colgadas de verdad.

Funciona porque el ojo reconoce el gesto antes de leer la marca. Y de paso muestra veinte productos en el espacio de tres.

Dónde va: debajo de la portadaDispara: solo, en loop
Peso real: 1 KB de código, más las fotos de prendas que ya tenés.

Sección de tienda de ropa. Un riel horizontal fino cruza la pantalla. Debajo, las fotos de prendas en fila, todas del mismo alto, pasando de derecha a izquierda en un loop continuo de 30 s, sin saltos (duplicá la lista para que empalme). Cada prenda se mece 2 grados para un lado y para el otro cada 3 s, con la parte de arriba como eje, como si colgara. Al pasar el mouse, esa prenda se detiene y se agranda 4%. Nada más se mueve en la sección.
En vivo
04 · ESTUDIO DE ARQUITECTURA

El plano que se dibuja

Las paredes aparecen una por una, después las medidas. Como si alguien estuviera proyectando delante tuyo.

Un arquitecto vende el proyecto antes de que exista. El plano que se dibuja hace exactamente eso: muestra el trabajo naciendo. Es la animación más “de autor” de todas y la que más te posiciona como estudio.

También sirve para sanitarios y baños: el baño se dibuja en planta y después aparece la foto del baño terminado.

Dónde va: portada o sección de obrasDispara: al scrollear
Peso real: 3 KB. Es el mismo truco de la ruta: una línea que se completa.

Portada de estudio de arquitectura. Un plano en planta hecho en SVG, en líneas finas color hueso. Los muros se dibujan uno tras otro con stroke-dasharray sobre pathLength=1, 0,7 s cada tramo y 0,2 s de pausa entre uno y otro. Después aparecen las líneas de cota en verde agua y las medidas: 4,20 m, 3,60 m, 12 m². Al final, casi transparente, un render de la obra terminada detrás. Título a la izquierda, abajo y chico. Que se pueda repetir al volver a subir la página.
En vivo
24,00 m COCINA ESTAR
05 · PINTURERÍA

La mancha que se abre

Una mancha de color crece desde el centro y va cambiando de tono. Como cuando volcás una lata.

Una pinturería vende color. El color no se explica: se derrama. Esta animación es la más generosa porque el mismo gesto te sirve para el probador de ambientes, para los combos y para el botón de compra.

Es también la que más se adapta: cambiás el color de la mancha y ya tenés otra marca.

Dónde va: portada y probador de colorDispara: al scrollear y al tocar
Peso real: 1,5 KB. Nada de imágenes: el color es código.

Portada de pinturería. Una mancha circular crece desde el centro hasta cubrir el 70% de la caja usando clip-path circle de 0% a 72%, en 2,2 s con curva suave. Mientras crece cambia de color, pasando del naranja al verde agua y al lima. Alrededor caen seis gotas chiquitas de 10px con retardo entre ellas. Abajo, tres muestras redondas de color que laten apenas. Al hacer clic en una muestra, la mancha toma ese color. Texto encima, en blanco, corto: Pintá sin adivinar.
En vivo
06 · INMOBILIARIA Y CORRALÓN

La casa por capas

Los pisos flotan separados y se acomodan solos. La obra se arma delante del cliente.

Acá el mensaje es “esto se construye”. Las capas son los pasos: terreno, platea, muros, techo. Cada una respira a distinto ritmo, así el ojo entiende que hay un orden.

Al corralón le dice “yo te doy todo por capas”. A la inmobiliaria le dice “la casa ya está pensada”. Es el mismo código para los dos.

Dónde va: sección de procesoDispara: al scrollear
Peso real: 1 KB. Si lo hacés con fotos, cada capa es una foto recortada.

Sección de proceso para corralón o inmobiliaria. Cuatro capas rectangulares apiladas, como los pasos de una obra: terreno, platea, muros y techo. Cada capa flota 10px arriba y abajo, cada una con medio segundo de diferencia respecto de la anterior, para que se vea que hay orden. La última capa, el techo, va en color lima y con más luz. Al lado, una lista de cuatro pasos que se van encendiendo con el mismo ritmo. Sin imágenes, todo CSS, para que cargue al instante.
En vivo
07 · SERVICIOS PROFESIONALES

El número que sube

Los números trepan y las barras crecen. Le dicen al cliente “acá hay resultados, no promesas”.

Un servicio (contador, clínica, seguro, estudio jurídico) no tiene un producto lindo para mostrar. Tiene resultados. Entonces el movimiento es el número que sube y la barra que crece.

Es la animación más honesta: solo se mueve si tenés algo que contar. Y también es la que menos cansa, porque no distrae del formulario de contacto.

Dónde va: sección de resultadosDispara: al scrollear
Peso real: 1 KB. Cero imágenes.

Sección de resultados para un estudio profesional. Tres números grandes que suben de cero al valor final en 1,4 s cuando la sección entra en pantalla: 4.812 obras, 27 años, 98% de clientes que vuelven. Debajo de cada uno, una barra fina que crece hasta el porcentaje que corresponde. Las barras arrancan una después de otra cada 120 ms. Ese es el único movimiento de la página, para que no compita con el formulario de contacto.
En vivo
98% clientes que vuelven
La regla de 3

Tres movimientos por página. Nunca más.

Esto es lo que separa “premium” de “feria”. Dínamo no anima todo: elige tres momentos y deja el resto quieto para que esos tres brillen.

1

La entrada

Lo primero que se mueve al abrir. Es el anzuelo: la ruta, la mancha o el estante.

2

El scroll

Un solo gesto que se dispara al bajar: aparecen tarjetas, se dibuja un plano, suben números.

3

El roce

El botón que se agranda o el producto que se inclina cuando el mouse pasa. Chiquito, pero es el que hace tocar.

Por qué funciona: el ojo es vago. Si todo se mueve, no mira nada. Si se mueve una sola cosa, no puede mirar otra. Eso es lo que hace que la persona se quede y compre.
Tus moldes

Qué le toca a cada molde que ya tenés.

Los seis moldes más el home center nuevo. Misma estructura, un gesto distinto cada uno. Así no se parecen entre sí y todos se sienten premium.

MoldeAnimación que le faltaPor qué
Home center
el que acabamos de hacer		El estante que se armaEs el único que hoy se mueve solo en la portada. La grilla de ofertas necesita el gesto de la ferretería.
02 Ferretería y herramientasEstante + producto que se inclinaLa herramienta tiene que girar un poco con el mouse: se toca antes de comprar.
03 Materiales y sanitariosEl baño que se dibujaMostrar el baño en planta y después terminado vende el proyecto, no el inodoro.
04 ConcesionariaEl auto por la rutaYa está resuelto en la opción “ruta”. Es el molde más fuerte que tenés: no se toca.
05 CorralónLa casa por capasEl corralón vende que la obra avanza. Cuatro capas lo dicen sin hablar.
06 Servicios profesionalesEl número que subeNo hay producto lindo: hay resultados. Números que trepan y nada más.
PintureríaLa mancha que se abreTres demos están bien de color; les falta el derrame. Es el gesto que hace tocar el probador.
Tienda de ropa
todavía no existe el molde		El perchero que correEs el molde que falta en la fábrica y el más fácil de armar con este gesto.
Próximo paso

Elegí uno y lo aplico esta semana.

No hace falta hacer los siete. Con aplicar el gesto al home center y al molde de ferretería, los dos dejan de competir en desventaja contra la concesionaria.

  1. 1
    Aplicar “el estante que se arma” al home center (Casa Firme) y a la grilla de ofertas. Es el que más rápido se nota.
  2. 2
    Copiar el gesto al molde 02 de ferretería, con el producto que se inclina al pasar el mouse.
  3. 3
    Hacer el molde de ropa con el perchero: es el que falta en la lista y se arma en una tarde.

Todos los pesos son reales: son los de Dínamo, medidos en su propio código. No hay librerías que descargar ni costos mensuales.