Studio graphique des Hautes-Alpes : identité, publicité, réseaux sociaux, merchandising et événementiel. Son site tient en une page déstructurée : le spot de l'agence occupe tout l'écran, une couche WebGL réagit au curseur, et les réalisations se lisent dessous.
Le projet
Lineup conçoit des identités de marque, des campagnes publicitaires, des contenus pour les réseaux sociaux, du merchandising et des dispositifs événementiels. Leur métier est de donner une forme visuelle à ce que les marques ont à dire.
Un studio dont le travail se juge à l'œil ne peut pas se présenter sur un gabarit. Il lui fallait une page qui tienne debout par elle-même : pas de grille sage, pas de bandeau suivi de trois colonnes, mais une mise en page déstructurée où le spot de l'agence occupe tout l'écran et où le texte vient se poser dessus.
Sous cette entrée, les réalisations se déroulent dans la même page : les campagnes du studio une à une, un bandeau d'affiches sport, et un contact pour finir. Tout est en ligne, et le site s'est construit par étapes, en commençant par la page d'attente.
Notre intervention
Tout vit dans une page unique, sans framework ni administration. L'effet est partout, mais il s'efface dès qu'il coûte trop cher à la machine du visiteur.
Le film original pesait 65 Mo en 4K. Nous l'avons ré-encodé en deux versions, une pour les grands écrans et une plus légère pour les téléphones, avec une image d'attente nette pendant le chargement. Il démarre muet, comme l'exigent les navigateurs, un bouton rend le son, et la lecture se coupe dès que l'onglet passe en arrière-plan.
Par-dessus le spot, une couche WebGL ajoute une poussière lumineuse et un voile de nébuleuse aux couleurs du logo. Les particules s'écartent et s'allument au passage du curseur, le calcul étant fait directement par la carte graphique. Le mélange des calques est réglé à la main pour que la couche reste transparente au lieu de masquer le film.
La traînée lumineuse derrière la souris est dessinée en Canvas 2D, volontairement sans WebGL : elle fonctionne donc sur les machines à carte graphique bridée. Sa dissipation est calculée sur le temps écoulé, pas sur le nombre d'images, elle se comporte donc pareil sur un écran 60 Hz et sur un 144 Hz.
Chaque étude de cas est décrite dans un seul fichier, et un script produit la page : visuels convertis en plusieurs largeurs, vidéos ré-encodées, mise en page générée. Ajouter une campagne, c'est écrire son texte et désigner ses visuels, pas recopier du HTML.
Les vidéos qui tournent dans la page ne sont pas les films livrés aux clients : ce sont des boucles muettes de douze secondes, calculées à la fabrication du site, bien plus légères. Le film entier, avec son son et sa définition, n'est chargé qu'au moment où le visiteur l'ouvre en grand. Une page de réalisations peut montrer dix vidéos sans faire payer dix films à celui qui la parcourt.
Un clic ouvre la visionneuse plein écran : flèches du clavier, balayage au doigt, Échap pour sortir. Sur les grands écrans, un sommaire latéral suit la lecture, et le bandeau d'affiches sport se fait glisser à la souris comme au doigt.
Pendant la lecture des réalisations, le spot, la poussière et la traînée se mettent en veille : la machine travaille pour les images du studio, pas pour le décor. Sans WebGL disponible, la page reste entière, seules les particules disparaissent. Et le visiteur qui a demandé moins d'animations à son système n'a ni intro ni parallaxe.
Le site est hébergé sur notre infrastructure Cloudflare : fichiers servis au plus près du visiteur, chiffrement, filtrage du trafic indésirable. Une mise à jour se déploie en une commande, et un mode diagnostic affiche au besoin la version publiée, la carte graphique détectée et l'état de chaque effet.
Chaque projet est documenté avec sa stack technique réelle.
