projecte · 2026
Scrollytelling promocional Aura L200
L'Aura L200 s'havia de presentar mostrant les seves configuracions d'instal·lació i les peces que el componen, amb el dinamisme d'una experiència 3D. El model 3D no es podia mostrar i el vídeo disponible durava només uns pocs segons. El scrollytelling va convertir aquest vídeo curt en una landing completa.
El punt de partida
Un vídeo curt com a únic material per a la landing
L'Aura L200 s'havia de presentar mostrant-ne les configuracions d'instal·lació i les peces que el componen, amb el dinamisme d'una experiència 3D. El model 3D no es podia mostrar i el vídeo disponible durava només uns pocs segons. L'scrollytelling va convertir aquest vídeo curt en una landing completa.
Aquest camí estava tancat, ja que el model 3D no es podia mostrar al web. El material disponible quedava reduït a un vídeo produït per al llançament, i aquest vídeo era extremadament curt per omplir una landing sencera. Amb una reproducció convencional, la presentació hauria durat uns segons i la resta de la pàgina hauria tornat al fulletó que volíem evitar.
La decisió tècnica
Scrollytelling: la línia de temps del vídeo passa a l'scroll
La solució va ser canviar la naturalesa del vídeo. En lloc de reproduir-se, el vídeo es recorre: la seva línia de temps queda vinculada a l'scroll, de manera que el visitant avança fotograma a fotograma, s'atura on vol i, si puja, el vídeo rebobina amb ell. Aquesta tècnica es coneix com a scrollytelling, i converteix la durada en distància. Un vídeo de pocs segons sosté una landing completa perquè cada segon s'examina en lloc de passar de llarg.
Sobre aquesta base es va construir la narració del producte. Algunes parts s'activaven amb l'scroll de l'usuari i altres fragments amb la interacció de l'usuari per no tallar el flux narratiu, com ara el despiece i les diferents configuracions d'il·luminació, sense carregar fitxers addicionals. Els blocs de text apareixen sincronitzats amb el moment exacte del vídeo, de manera que cada especificació arriba quan el pilot l'està mostrant en pantalla. GSAP i ScrollTrigger coordinen tota la sincronització.
Animació del vídeo
- 01
Avanç de fotograma per scroll
El desplaçament mou el capçal de reproducció fotograma a fotograma. La sensació és la de manipular el producte, no la de veure un clip.
- 02
Activació de fragments
Determinades accions llancen segments concrets del vídeo mestre sense carregar fitxers addicionals ni canviar de font.
- 03
Rebobinatge en tornar
En fer scroll cap amunt, el fragment es reprodueix en reversa. L'experiència és reversible en qualsevol punt, com ho seria una escena 3D real.
- 04
Seccions sincronitzades amb el temps del vídeo
Els textos no apareixen segons la posició del scroll, sinó segons el moment exacte del vídeo. Es mesura l'alçada de la landing en segons, no en píxels.
L'optimització que ho fa possible
Optimització del vídeo per al control fotograma a fotograma
Un vídeo preparat per reproduir-se no respon bé quan se li demana saltar a qualsevol fotograma en qualsevol direcció. Perquè el scroll el pogués recórrer amb fluïdesa, cap endavant i cap enrere, el vídeo es va recodificar específicament per a aquest ús.
El resultat respon a l'instant en qualsevol punt de la seva línia de temps, amb un pes d'arxiu que manté la primera càrrega de la landing en xifres raonables.
Mòbil
Vídeos verticals per a l'scrollytelling en mobile
La versió mòbil conserva l'experiència completa. Es van generar vídeos verticals específics, produïts per replicar cada efecte en el format de pantalla del mòbil, i el responsive intercanvia els arxius segons el dispositiu. El control per scroll, el rebobinat i la sincronització dels textos funcionen igual en tots dos formats. Canvia l'arxiu que serveix l'experiència i l'experiència es manté.
El resultat
Vídeo interactiu: què aporta a un llançament de producte
Un vídeo interactiu dona el control al visitant. El ritme de la presentació deixa d'estar fixat per l'arxiu i passa a la mà de qui mira, que s'atura en la configuració que li interessa i repassa el despiece tantes vegades com necessiti. Per a un producte tècnic com l'Aura L200, aquesta diferència converteix una peça audiovisual en una eina de consulta.
La conclusió és que es pot produir una landing completa i una bona experiència d'usuari amb material limitat. Quan el temps del vídeo passa a l'scroll, uns segons ben produïts donen per a tota una presentació.
Tens material en vídeo i un producte per llançar?
És possible que puguem ajudar-te a donar-li un altre enfocament