El detalle premium
El movimiento es lenguaje
Una web que se mueve bien se sientede calidad antes de que leas una sola palabra. El movimiento guía la mirada, da feedback (“tu click hizo algo”) y suaviza los cambios para que el ojo no se pierda. Es la diferencia entre una landing que parece de 2010 y una que parece de una marca seria.
La buena noticia: vos no escribís esto a mano. Le pedís a la IA y ella usa una librería que se llama Motion (la que mueve este mismo sitio). Tu trabajo es saber qué pedir y, sobre todo, con cuánta dosis.
La idea de todo el módulo
Antes de las demos
La regla de la dosis
La misma animación puede verse cara o barata según cuánto la cargues. Arrastrá el divisor: a la izquierda, exagerada (rebota, gira, dura demasiado); a la derecha, en su punto.
CTA
Entra y se queda quieta.
CTA
Rebota, gira, marea.
Las tres perillas que tenés que dominar (y nombrar cuando le pedís a la IA): la duración (0.3–0.6s alcanza), la distancia del desplazamiento (10–24px, no 90) y la curva (que arranque rápido y frene suave, nunca rebote sin motivo).
Accesibilidad — no es opcional
Demo 1
Scroll reveal (fade-up)
El clásico: los bloques aparecen desde abajo con un fundido a medida que scrolleás. Le da ritmo a la página sin distraer. Tocá Reproducir para verlo de nuevo.
Nuevo fondo
IEB Renta Fija Plus
Aparece al entrar en pantalla. Sutil, no salta a la cara.
<motion.div
initial={{ opacity: 0, y: 24 }} // arranca invisible, 24px abajo
whileInView={{ opacity: 1, y: 0 }} // al entrar en pantalla: visible
viewport={{ once: true }} // se anima una sola vez
transition={{ duration: 0.5 }} // medio segundo: suave
>
Tu contenido acá
</motion.div>En mi landing de {{producto/campaña}}, animá las secciones para que aparezcan con un fade-up sutil cuando entran en pantalla al scrollear.
- Desplazamiento de ~20px, duración 0.5s, curva suave (ease-out).
- Que se animen una sola vez (no cada vez que vuelvo a pasar).
- Respetá prefers-reduced-motion (si está activado, sin movimiento).
Usá Motion (motion/react).Demo 2
Hover effect
El hoveres la reacción al pasar el mouse. Una card que se eleva apenas le dice a la persona “esto es clickeable”. Pasá el mouse por la demo (no hace falta reproducir, reacciona sola):
<motion.button
whileHover={{ y: -6 }} // se levanta 6px al pasar el mouse
whileTap={{ scale: 0.98 }} // se hunde apenas al hacer click
transition={{ type: "spring", stiffness: 400, damping: 22 }}
>
Ver propuesta
</motion.button>A las cards de {{servicios/productos}} sumales un hover sutil: que se eleven ~6px y muestren una sombra suave, con transición tipo resorte (spring) breve.
Que al hacer click se hundan apenas (feedback de tap).
Nada de escalas grandes ni rotaciones. Usá Motion.Cuidado en mobile
Demo 3
Microinteracción (botón que reacciona)
Una microinteracción es la respuesta chiquita a una acción: el corazón que late al darle “me gusta”, el botón que se hunde, el ícono que cambia. Da la sensación de que la web está viva. Tocá el botón:
<motion.button
onClick={() => setLiked(v => !v)}
whileTap={{ scale: 0.85 }} // se achica al tocarlo
>
<motion.span
key={liked ? "on" : "off"} // remonta = re-anima el ícono
initial={{ scale: 0.6 }}
animate={{ scale: 1 }}
transition={{ type: "spring", stiffness: 600, damping: 14 }}
>
<Heart className={liked ? "fill-rose-500 text-rose-500" : ""} />
</motion.span>
</motion.button>En el botón de {{acción: ej. "Me gusta" / "Agendar"}} agregá una microinteracción:
- Que se hunda apenas al hacer click (scale ~0.9, spring).
- Que el ícono cambie de estado con un pequeño "pop" (escala) al activarse.
Cortita y sutil, nada que distraiga. Usá Motion.Demo 4
Loading (skeleton)
Cuando algo tarda en cargar, una pantalla en blanco da sensación de roto. La solución elegante es el skeleton: cajas grises que pulsan donde va a aparecer el contenido. Tocá Reproducir:
<motion.div
className="h-3 rounded-full bg-secondary"
animate={{ opacity: [0.4, 1, 0.4] }} // pulsa de claro a opaco
transition={{
duration: 1.2,
repeat: Infinity, // loop infinito mientras carga
ease: "easeInOut",
}}
/>Mientras se cargan los datos de {{ej: el dashboard de campañas / la lista de leads}}, mostrá un skeleton: bloques grises con la forma del contenido que pulsan suavemente (opacidad en loop).
Sumá un spinner chico con el texto "Cargando…".
Cuando llegan los datos, hacé un cross-fade del skeleton al contenido real. Usá Motion.Por qué importa para conversión
Demo 5
Transición entre estados
Cuando una parte de la pantalla cambia (el form se convierte en un “gracias”), un corte seco se siente brusco. Una transición suave hace que el ojo siga el hilo. Tocá “Quiero más info”:
<AnimatePresence mode="wait">
{sent ? (
<motion.div key="ok"
initial={{ opacity: 0, y: 12 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -12 }} // animación de SALIDA
>
¡Listo! Te contactamos.
</motion.div>
) : (
<motion.div key="form" /* …mismo patrón… */>
<Formulario />
</motion.div>
)}
</AnimatePresence>En mi formulario de captación de leads, cuando se envía con éxito quiero una transición suave del formulario a un mensaje de "¡Gracias! Te contactamos". - Cross-fade con un leve desplazamiento (el form sale hacia arriba, el mensaje entra desde abajo). - Que sea claro y rápido (~0.35s), sin rebotes. Usá AnimatePresence de Motion para animar la entrada y la salida.
El método
Cómo pedir animaciones que no se sientan baratas
No le digas “ponele animaciones” y reces. Sé específico en cuatro cosas: qué se anima, cuándo se dispara (al cargar, al scrollear, al hover, al click), cuánto dura, y el tono (sutil / premium). Y siempre cerrá con accesibilidad.
Hacé un pase de animación a la landing de {{campaña/producto}} con criterio premium y sutil (NADA exagerado):
1. Scroll reveal: secciones con fade-up de ~20px, 0.5s, una sola vez.
2. Hover en cards y botones: elevación leve + sombra, sin escalas grandes.
3. Microinteracciones en los CTA: hundido al click (spring corto).
4. Estados de carga: skeletons que pulsan en vez de pantallas en blanco.
5. Transiciones de estado (form → gracias) con cross-fade.
Reglas: duraciones cortas, curvas ease-out, sin rebotes innecesarios.
IMPORTANTE: respetá prefers-reduced-motion (si está activo, desactivá los movimientos).
Usá Motion (motion/react). Mostrame el antes y el después de un componente.Truco de iteración
Para cerrar
Checklist de animación premium
Antes de dar por buena una web animada, pasá esta lista. Si algo no cumple, pedile a la IA que lo afine.