15 ejemplos de sitios web interactivos: una técnica de animación por cada uno
La forma más rápida de afinar criterio en animación no es ver otro tutorial. Es abrir trabajo bueno y mirarlo con intención.
El problema de las listas de "sitios web increíbles" es que te dejan mirando. Te impresionás, cerrás la pestaña y no te llevaste nada. Mirar sin saber qué buscar es entretenimiento, no estudio.
Así que esta lista está armada al revés. Quince sitios, y a cada uno le asignamos una técnica concreta. No "mirá qué lindo": mirá esto en particular, y fijate por qué funciona. Abrilos en otra pestaña mientras leés.
Si lo que buscás es el showcase puro, tenemos aparte los siete sitios que son referencia de animación. Este post es otra cosa: acá cada sitio entra por una técnica.
Todos están vivos y verificados a julio de 2026.
Lo esencial: quince sitios reales, uno por técnica de animación web, con la indicación exacta de dónde poner el ojo en cada uno.
Qué mirar cuando analizás animación web
Antes de abrir el primero, tres preguntas que sirven para cualquier pieza. Son las mismas que usás para diagnosticar una animación propia.
¿Qué duración tiene? Casi todo lo que se siente amateur está mal cronometrado, no mal dibujado. Una transición de interfaz que pasa de 400 milisegundos empieza a estorbar.
¿Cómo entra y cómo sale? El easing —la aceleración y desaceleración del movimiento— es lo que separa algo mecánico de algo con peso. Un objeto que arranca y frena de golpe se siente falso, en la web y en After Effects por igual.
¿Para qué está? Esta es la que más duele. Si sacás la animación y no se pierde nada, era decoración. La buena animación web hace un trabajo: te dice dónde mirar, te confirma que algo pasó, o te ubica en el espacio.
Con eso, arrancamos.
1. Render en tiempo real — Bruno Simon
El portfolio más citado de la última década, y con razón: entrás y manejás un auto en un mundo 3D para descubrir sus proyectos. Está hecho con Three.js sobre WebGL y WebGPU, con física real de la librería Rapier.
Qué mirar: el peso del auto. Cómo se hunde la suspensión al frenar, cómo derrapa, cuánto tarda en detenerse. Nada de eso está animado a mano — lo calcula el motor de física. Pero el criterio con el que juzgás si "se siente bien" es exactamente el mismo que aplicás cuando animás un rebote con keyframes. La física acá es un profesor de peso.
2. Los principios de animación aplicados a interfaz — Zajno
Si abrís uno solo de los quince, que sea este. El estudio Zajno armó un sitio que demuestra ocho principios de animación de interfaz, cada uno con su ejemplo funcionando al lado de la explicación: easing, offset y delay, fade, transform y morph, masking, dimension, parallax y zoom.
Qué mirar: el ejemplo de offset y delay. Es el mismo recurso que usás para escalonar la entrada de elementos en una animación tradicional, aplicado a una lista de interfaz. Cambia la percepción por completo: los elementos que aparecen todos juntos se sienten como un bloque; escalonados por unos milisegundos, se sienten como una secuencia.
Es el vocabulario de la animación clásica traducido a producto. Criterio en estado puro. Si querés el marco teórico, lo desarrollamos en por qué el motion design mejora la experiencia de usuario.
3. Scrollytelling — Breakthrough Energy
Site of the Day de Awwwards el 15 de enero de 2026. Construido con GSAP, Vue y Locomotive Scroll: la narrativa se va armando a medida que bajás.
Qué mirar: que acá el timing lo controla el lector, no vos. Esa es la diferencia grande con el video. Alguien puede scrollear despacio, a los saltos, o de un tirón hasta el final. La animación tiene que verse bien en los tres casos.
Fijate cómo resuelven eso: los movimientos son cortos y auto-contenidos, para que ninguno quede a mitad de camino. Es una restricción que en video no tenés.
4. Animación atada al scroll — Lightship
Site of the Day el 13 de enero de 2026. Un fabricante de casas rodantes eléctricas, con carruseles que avanzan según cuánto bajaste.
Qué mirar: la diferencia entre animación disparada por el scroll y animación atada al scroll. En la primera, llegás a un punto y el movimiento se reproduce solo. En la segunda, el scroll es la línea de tiempo: si volvés para arriba, la animación va para atrás.
Es la misma distinción que hay entre reproducir una composición y arrastrar el cabezal a mano. Una la mirás; la otra la manejás.
5. Scroll horizontal — CANALS
Proyecto personal de Marcus Brown y Aristide Benoist sobre la historia de los canales de Ámsterdam, con material del archivo del Rijksmuseum. Site of the Day en diciembre de 2019 con 8,28 de puntaje: viejo, pero sigue siendo la referencia del formato.
Qué mirar: el parallax entre capas. Los planos se mueven a velocidades distintas según su profundidad, que es exactamente el mismo recurso que usás en un multiplano de animación tradicional. Fijate cuánta diferencia de velocidad hace falta para que se lea como profundidad, y en qué punto se vuelve mareo.
6. Mezcla de medios — GOBOLD
Una agencia que puso ocho modelos 3D en Three.js, efecto térmico, sonido, video y un juego jugable dentro de su propio sitio.
Qué mirar: cómo evitan que se sienta un collage. Con tantos elementos compitiendo, lo esperable sería el caos. Prestá atención a la jerarquía: en cada momento hay una sola cosa moviéndose fuerte y el resto está quieto o casi. Es la misma regla de un plano bien compuesto — si todo se mueve, no se mueve nada.
7. Realidad aumentada en el navegador — Sketchfab
Millones de modelos 3D que se ven en el navegador, y cualquiera de ellos se puede abrir en realidad virtual o aumentada sin instalar nada. Funciona con WebXR, el estándar del W3C.
Qué mirar: qué le pasa al timing cuando el espectador maneja la cámara. Todo lo que sabés sobre encuadre y sobre "mostrar esto en el momento justo" se cae, porque la persona puede estar mirando para otro lado. Es un buen ejercicio de humildad y una anticipación de hacia dónde va parte del trabajo.
8. Movimiento de fondo — Stripe
El degradado animado de Stripe es probablemente el fondo más copiado de internet.
Qué mirar: que nunca te pide atención. No tiene un principio ni un final visible, no hay un momento donde "pase algo". Es un loop sin costura y sin acento.
Eso es dificilísimo. La tentación de cualquiera que anima es meter un momento de interés, y acá el logro es justamente no meterlo. Si al leer el texto notaste el fondo, el fondo falló.
9. Microinteracciones — Linear
Una herramienta de gestión de proyectos que se volvió referencia de interfaz por sus detalles: estados de carga, transiciones entre columnas, confirmaciones.
Qué mirar: la duración. Todo dura poquísimo. La regla práctica es que una microinteracción que llegás a notar conscientemente ya es demasiado larga. Su trabajo es confirmarte que el sistema te escuchó, no lucirse.
Es la lección más transferible de la lista. El instinto de todo animador que arranca es que si algo está bueno, que dure más. En interfaz, al revés.
10. Tipografía en movimiento — Neue Montreal
Micrositio de Pangram Pangram dedicado a una sola tipografía.
Qué mirar: la letra tratada como objeto con peso, no como texto. Cuando una tipografía se mueve bien, respeta las mismas reglas que cualquier otro cuerpo: acelera, tiene inercia, no arranca de cero instantáneamente. Fijate cuánto de la personalidad de la fuente se comunica por cómo se mueve, antes de que llegues a leer nada.
11. Animación de líneas — Vivus
No es un sitio de agencia: es la demo de una librería. Y para estudiar timing vale más que muchos portfolios.
Qué mirar: la demo te deja aplicar tres modos al mismo dibujo: delayed (todos los trazos con un desfase inicial), sync (todos empiezan y terminan juntos) y oneByOne (uno después del otro). Mismo dibujo, tres timings, tres sensaciones completamente distintas.
Es un laboratorio de timing puro, sin nada más que interfiera. Probá los tres y quedate con la sensación de cada uno. Si querés la diferencia de fondo entre los dos conceptos, está en timing vs spacing.
12. El trazo que se dibuja solo — Jake Archibald
El artículo de 2013 que popularizó la técnica. Es viejo y sigue siendo la explicación más clara que existe.
Qué mirar: el truco, porque entenderlo cambia cómo diseñás. No se anima el trazo: se dibuja la línea completa, se la convierte en una línea punteada cuyo guion mide exactamente lo que mide la línea, y se corre el punteado hasta descubrirla. Las propiedades son stroke-dasharray y stroke-dashoffset.
Saber eso te dice de entrada qué dibujos van a funcionar con esta técnica y cuáles no.
13. Iconos animados — Lordicon
Más de 46.000 iconos con estados de interacción: hover, morph, loop.
Qué mirar: los estados, no los iconos. Un icono animado de producto no es un clip que se reproduce — es un objeto que responde de forma distinta según lo que hacés. Entrar, pasar por encima, hacer clic y salir son cuatro momentos que hay que resolver.
Dato útil: exporta a Lottie, pero también a .aep y .mogrt. O sea, entra y sale de After Effects. Es el puente más directo entre lo que ya sabés y el trabajo de interfaz.
14. Animación de personaje — Duolingo
Los personajes de Duolingo corren con Rive, con sincronización de labios en producción en más de cuarenta idiomas.
Qué mirar: que no son clips lineales. Rive trabaja con máquinas de estado: el personaje tiene estados —contento, esperando, festejando— y transiciones entre ellos, y el programa decide cuál corresponde en cada momento.
Eso cambia cómo se anima. No armás una secuencia de principio a fin; armás piezas que tienen que poder encadenarse en cualquier orden sin que se note el salto. La anticipación y el descanso entre acciones se vuelven lo más importante.
15. Animación como información — Figma
Cuando varias personas editan el mismo archivo, ves el cursor de cada una moverse en tiempo real, con su nombre al lado.
Qué mirar: que ese movimiento no es decoración: es el dato. El cursor ajeno no llega a tu pantalla a sesenta cuadros por segundo — llega a saltos, por red. Lo que ves suave es una interpolación que rellena los huecos.
Es el caso más limpio de animación que existe para transmitir información y no para adornar. Si la sacás, perdés la información.
Qué tienen en común los quince
Ninguno anima porque sí.
En cada uno se puede contestar la tercera pregunta del principio —¿para qué está?— con una frase concreta. Stripe crea clima sin robar atención. Linear te confirma que el sistema respondió. Figma te dice dónde está mirando otra persona. Zajno te enseña. Bruno Simon te hace jugar para que te quedes.
La otra cosa que comparten es más incómoda: en casi todos, el mérito está en lo que no hicieron. El fondo que no llama la atención, la microinteracción que no se nota, el scroll que no marea. Nada de eso se ve en una captura de pantalla.
Por eso vale abrirlos. Un frame no te muestra timing.
Cómo usar esta lista
No los mires los quince hoy.
Agarrá uno por semana. Abrilo, hacé las tres preguntas del principio, y después tratá de reproducir el efecto en la herramienta que ya manejás. No hace falta que sea en código: el timing de una microinteracción de Linear se estudia perfecto en After Effects con dos keyframes y una curva bien puesta.
Ahí es donde el criterio deja de ser una idea y se te pega a la mano. Es el mismo camino que contamos en cómo desarrollar criterio propio para dejar de copiar tutoriales.
Y si te quedaste con ganas de entender qué hay abajo de todo esto, cómo se hacen las animaciones web desarma las cinco capas técnicas.
Practicá con devolución
Esa práctica —mirar trabajo bueno, desarmarlo y reproducirlo— es exactamente el método con el que trabajamos en la comunidad de Koncepto. Ejercicios cortos, con devolución, para que dejes de copiar tutoriales y empieces a decidir por tu cuenta.
Podés entrar y probarla gratis durante 7 días, sin compromiso.
Koncepto Skool es nuestra plataforma de formación.
Preguntas frecuentes
¿Cuáles son los mejores ejemplos de sitios web interactivos?
Depende de qué quieras estudiar. Para render 3D en tiempo real, Bruno Simon. Para narrativa por scroll, Breakthrough Energy. Para microinteracciones, Linear. Para principios de animación aplicados a interfaz, el sitio de Zajno. Esa es la lógica de esta lista: un sitio por técnica, en vez de un ranking de "los mejores".
¿Qué diferencia hay entre una animación disparada por scroll y una atada al scroll?
La disparada se reproduce sola cuando llegás a cierto punto: el scroll es solo el gatillo. La atada usa el scroll como línea de tiempo, así que si subís, la animación retrocede. La segunda se siente más física, pero exige que el movimiento funcione a cualquier velocidad.
¿Necesito saber programar para hacer animación web?
Para producirla en un sitio real, sí, o trabajar con alguien que programe. Para estudiarla y aplicar el criterio, no. El timing, el easing y el peso se estudian igual en After Effects, y son exactamente los mismos principios.
¿Con qué herramientas están hechos estos sitios?
Se repiten pocas: Three.js para 3D en el navegador, GSAP y Locomotive Scroll para el movimiento ligado al scroll, y Lottie o Rive cuando la animación viene de una herramienta de diseño. Rive suma máquinas de estado, que es lo que permite personajes interactivos como los de Duolingo.
Comentarios
Regístrate ó inicia sesión para comentar.
Iniciar Sesión