proyecto · 2026
Scrollytelling promocional Aura L200
El Aura L200 tenía que presentarse enseñando sus configuraciones de instalación y las piezas que lo componen, con el dinamismo de una experiencia 3D. El modelo 3D no podía mostrarse y el vídeo disponible duraba unos pocos segundos. El scrollytelling convirtió ese vídeo corto en una landing completa.
El punto de partida
Un vídeo corto como único material para la landing
El Aura L200 tenía que presentarse enseñando sus configuraciones de instalación y las piezas que lo componen, con el dinamismo de una experiencia 3D. El modelo 3D no podía mostrarse y el vídeo disponible duraba unos pocos segundos. El scrollytelling convirtió ese vídeo corto en una landing completa.
Ese camino estaba cerrado dado que el modelo 3D no podía mostrarse en la web. El material disponible quedaba reducido a un vídeo producido para el lanzamiento, y ese vídeo era extremadamente corto para llenar una landing entera. Con una reproducción convencional, la presentación habría durado unos segundos y el resto de la página habría vuelto al folleto que queríamos evitar.
La decisión técnica
Scrollytelling: la línea de tiempo del vídeo pasa al scroll
La solución fue cambiar la naturaleza del vídeo. En lugar de reproducirse, el vídeo se recorre: su línea de tiempo queda vinculada al scroll, de modo que el visitante avanza fotograma a fotograma, se detiene donde quiere y, si sube, el vídeo rebobina con él. Esta técnica se conoce como scrollytelling, y convierte la duración en distancia. Un vídeo de pocos segundos sostiene una landing completa porque cada segundo se examina en lugar de pasar de largo.
Sobre esa base se construyó la narración del producto. Algunas partes se disparaban con el scroll del usuario y otros fragmentos con la interacción del usuario para no cortar el flujo narrativo, como el despiece y las diferentes configuraciones de iluminación, sin cargar archivos adicionales. Los bloques de texto aparecen sincronizados con el momento exacto del vídeo, de manera que cada especificación llega cuando el piloto la está mostrando en pantalla. GSAP y ScrollTrigger coordinan toda la sincronización.
Animación del vídeo
- 01
Avance de fotograma por scroll
El desplazamiento mueve el cabezal de reproducción fotograma a fotograma. La sensación es la de manipular el producto, no la de ver un clip.
- 02
Disparo de fragmentos
Determinadas acciones lanzan segmentos concretos del vídeo maestro sin cargar archivos adicionales ni cambiar de fuente.
- 03
Rebobinado al volver
Al hacer scroll hacia arriba, el fragmento se reproduce en reversa. La experiencia es reversible en cualquier punto, como lo sería una escena 3D real.
- 04
Secciones sincronizadas con el tiempo del vídeo
Los textos no aparecen según la posición del scroll, sino según el momento exacto del vídeo. Se mide la altura de la landing en segundos, no en píxeles.
La optimización que lo hace posible
Optimización del vídeo para el control fotograma a fotograma
Un vídeo preparado para reproducirse no responde bien cuando se le pide saltar a cualquier fotograma en cualquier dirección. Para que el scroll pudiera recorrerlo con fluidez, hacia delante y hacia atrás, el vídeo se recodificó específicamente para este uso.
El resultado responde al instante en cualquier punto de su línea de tiempo, con un peso de archivo que mantiene la primera carga de la landing en cifras razonables.
Mobile
Vídeos verticales para el scrollytelling en mobile
La versión móvil conserva la experiencia completa. Se generaron vídeos verticales específicos, producidos para replicar cada efecto en el formato de pantalla del móvil, y el responsive intercambia los archivos según el dispositivo. El control por scroll, el rebobinado y la sincronización de los textos funcionan igual en ambos formatos. Cambia el archivo que sirve la experiencia y la experiencia se mantiene.
El resultado
Vídeo interactivo: lo que aporta a un lanzamiento de producto
Un vídeo interactivo entrega el control al visitante. El ritmo de la presentación deja de estar fijado por el archivo y pasa a la mano de quien mira, que se detiene en la configuración que le interesa y repasa el despiece las veces que necesite. Para un producto técnico como el Aura L200, esa diferencia convierte una pieza audiovisual en una herramienta de consulta.
La conclusión es que se puede producir una landing completa y una buena experiencia de usuario con material limitado. Cuando el tiempo del vídeo pasa al scroll, unos segundos bien producidos dan para toda una presentación.
¿Tienes material en vídeo y un producto que lanzar?
Es posible que podamos ayudarte a darle otro enfoque
