Swamp City Stompers
Swamp City StompersLe défi
Les Swamp City Stompers sont un groupe roots brut et marécageux de la vallée de l'Outaouais — le genre de groupe qui remplit un bar un mardi. Leur présence web existante ne reflétait pas du tout l'énergie qu'ils dégagent sur scène. Des gabarits de groupe génériques, des mises en page sans effort, rien qui leur ressemblait.
La demande : un site qui vous frappe comme leur musique. Immersif, un peu rough sur les bords, conçu pour le vrai public du groupe — pas une brochure numérique déguisée en site web.
L'approche
On a construit le site comme une expérience multi-pages axée sur le défilement en utilisant GSAP, ScrollTrigger et Lenis pour un défilement fluide. Barba.js gère les transitions de pages avec un effet cinématique de « levée » entre les sections — pas de rechargements de page, pas d'éclair blanc.
La page d'accueil s'ouvre avec un héros vidéo grunge en boucle superposé d'une texture de rayures et d'une animation du logo du groupe. Les sections sont chorégraphiées : les cartes des membres du groupe se révèlent au défilement, l'accordéon de tournée tire d'un fichier de données centralisé, et la section Watch sert des intégrations façade YouTube (zéro JavaScript YouTube jusqu'au clic de l'utilisateur — aucun impact sur les performances).
Les sous-pages (Tournée, Histoire, EPK, Merch) portent chacune leurs propres images héros assombries et partagent un système de mise en page cohérent. La page histoire utilise une chronologie décalée gauche/droite racontant l'origine du groupe. L'EPK utilise une mise en page en écran partagé conçue pour les agents de réservation.
Le résultat
Un site de groupe multi-pages complet avec animations de défilement, transitions de pages fluides, gestion de tournée, une page de merch et un EPK — le tout construit sans CMS ni constructeur de pages. L'esthétique sombre/dorée tient sur chaque page et chaque taille d'écran.
La performance était une contrainte tout au long du projet : les callbacks du ticker GSAP sont nettoyés à chaque transition Barba, Lenis est détruit et réinitialisé proprement, et les intégrations YouTube ne se chargent pas avant que l'utilisateur interagisse avec elles. Le site est rapide sur mobile parce qu'il a été conçu pour l'être.
Finalisation en cours de la page contact et du déploiement en staging sur swampcitystompers.ca.