Création de site web
Découvrez notre expertise pour créer des sites modernes, performants et adaptés à vos besoins.
Référencement
Améliorez votre visibilité en ligne grâce à une stratégie complète et adaptée à vos objectifs.
Pour présenter sa nouvelle gamme de solutions d’automatisation industrielle, Rollomatic souhaitait une expérience interactive capable de captiver le public lors de salons et démonstrations, sans dépendre d’une connexion Internet.
L’objectif : concevoir une webapp immersive, fluide et tactile, capable de tourner en local sur différents supports: TV touchscreen, laptop ou borne d’exposition.
Nous avons développé une interface 100 % custom, pensée comme une présentation dynamique et vivante.
L’utilisateur navigue entre les sections à travers des slides animées directionnelles, des vidéos de transition fluides et des effets GSAP. Chaque étape du parcours a été conçue pour immerger le visiteur dans l’univers de l’automatisation Rollomatic, tout en gardant une navigation fluide et intuitive, qu’il soit sur écran tactile ou ordinateur.
HTML, CSS, Javascript & GSAP
L’application repose sur une architecture modulaire, découpée par slides et gérant plusieurs états (initial, vidéo, interactif, final).
Chaque composant réagit en temps réel aux interactions de l’utilisateur : clics, zones actives ou transitions.
Les animations avancées sont propulsées par GSAP et Flip, offrant des transitions fluides entre les cartes et leurs vues détaillées, avec retour à la position d’origine pour un effet de continuité naturelle.
Pour garantir un rendu sans latence, nous avons optimisé :
Vidéos avec transparence & performance
Les transitions entre sections reposent sur des vidéos avec canal alpha, créant des effets d’incrustation fluides entre les scènes.
Les fichiers ont été optimisés pour Windows (HEVC/H.265) afin d’obtenir une qualité maximale avec un poids minimal.
Un système de préchargement et de gel d’image (“freeze frame”) à la fin de chaque séquence garantit une continuité parfaite lors des présentations publiques.
Design modulaire, tactile et immersif
L’interface a été conçue pour s’adapter à plusieurs environnements : salons, showrooms, ou laptops. L’expérience combine des cartes interactives animées, des vidéos d'animation 3D simulant la profondeur des machines et des sections à plusieurs niveaux : introduction, démonstration et explication technique.
Chaque niveau d’information est accessible de manière fluide, offrant une progression naturelle dans la découverte des produits Rollomatic.
Prototypage, développement, intégration
Le projet a suivi un workflow complet : prototypage → user flow → développement → tests → intégration finale sur matériel d’exposition.
Le design UI s’inspire du glassmorphism, avec une typographie industrielle et une palette sobre et technique, fidèle à l’identité de Rollomatic.
Le tout a été intégré dans une application Electron, permettant une exécution offline en mode kiosque, sans dépendre d’une connexion Internet.
Une collaboration étroite avec le client a permis d’ajuster chaque transition, chaque texte et chaque rendu vidéo pour garantir une expérience cohérente sur tous les supports.
Le résultat final : une expérience interactive fluide, performante et portable, illustrant la transition vers l’automatisation industrielle à travers un parcours visuel immersif.
Une solution 100 % custom, pensée pour impressionner en salon tout en restant intuitive et stable, quel que soit le contexte d’utilisation.
