Kestra Rive Homepage
Kestra, start-up française, est une plate-forme open source d’orchestration et de planification, elle aide les développeurs à créer, exécuter, planifier et surveiller des pipelines complexes.
Suite au succès des précédentes vidéos Realtime Triggers et Fundraising, Kestra revient cette fois avec une nouvelle demande : pour leur nouvelle page d’accueil, il était souhaitable d’avoir une animation cool et dynamique pour expliquer simplement le process de Kestra pour l’orchestration, l’automatisation et la planification de données.
En premier lieu, nous sommes partis sur l’idée d’une vidéo en arrière-plan en reprenant l’interface réelle de Kestra qui serait animée mais c’est vite devenu une mauvaise idée car ça faisait trop tuto. Nous avons donc opté pour un design plus schématique sans forcément aller trop dans le détail, on se limitera à l’essentiel.
Finalement, l’idée d’une vidéo ne plaisait pas car ça alourdirait la page d’accueil et hors de question de mettre un Gif animé, déjà c’est moche et en plus ça peut vite devenir plus lourd qu’une vidéo.
Et c’est là que LA bonne idée est arrivée : pourquoi ne ferait-on pas une animation via Lottie ou Rive ? Et si on ajoutait de l’interaction ? Ah mais en plus, c’est extrêmement léger et vectoriel !
Bingo ! On part sur cette solution !
Ayant déjà un peu expérimenté Rive sur ce présent site (cf ma page d’accueil), je me suis dit : « Tentons l’aventure ! Je ne sais pas où on va mais j’y vais quand même ». Je me suis vite rendu compte que c’était possible, que ça fonctionnerait et que ce serait extrêmement intéressant à expérimenter. Bref, ça coche toutes les cases.
Résultat : l’animation interactive complète ne pèse que 566Ko, c’est encore moins lourd qu’une image ^^
De là est venue l’idée de mettre une grille en arrière-plan interactive qui réagit au passage de la souris, de lancer une animation complète la première fois puis de rendre chaque bloc interactif pour éviter que ça tourne en boucle, ça reste le choix du visiteur de voir ces éléments s’animer ou non.
Une fois de plus, je lance un grand merci à Martin-Pierre Roset et Nicolas Callens pour leur totale confiance et leur bienveillance.
Le workflow idéal et l’efficacité des échanges ont permis d’avoir ce résultat très rapidement et sans prise de tête 😍
Voici donc ci-après le résultat final, c’est le fichier Rive dans son pur jus, chargé sur cette page, pour pouvoir directement testé les blocs interactifs 😉 (n’hésite pas à recharger cette page pour voir l’animation depuis le départ)
Et pour voir le résultat parfaitement intégré sur le site, c’est sur kestra.io !