Music by Baps : trois sorties et beaucoup de shaders

Le contexte

Music by Baps, c’est la maison des trois sorties que j’ai publiées sur le label Nuits : Sweet Like Stevia, Compliance Carnival et L-Theanine. Des chansons sur les édulcorants, la conformité, et les acides aminés qu’on trouve dans le thé. Je vois très bien à quoi ça ressemble, en liste.

Le site, c’est une page par sortie plus une page d’accueil qui les tient, construit avec GSAP, des shaders WebGL et de l’animation liée au défilement. C’est plus de site que trois morceaux n’en exigent strictement. C’est justement l’idée.

Le problème

Une page d’artiste sur une plateforme de streaming, c’est une rangée de carrés dans une grille que vous ne contrôlez pas, à côté d’un artiste algorithmiquement similaire auquel vous n’avez pas demandé à être comparé. C’est très bien. C’est aussi identique pour chaque musicien vivant, ce qui veut dire que ça ne communique rien d’autre que le fait que vous existez et que vous avez téléversé des fichiers.

L’alternative vers laquelle se tournent la plupart des artistes indépendants, c’est une page de liens en bio, faite des mêmes carrés avec une typographie pire.

J’ai trois sorties et un avis tranché sur la typographie. L’écart entre ce que les plateformes de streaming vous laissent dire et ce qu’est réellement une sortie m’a paru valoir la peine d’être comblé, et le combler est entièrement un problème web, que je sais résoudre.

Mon rôle

Tout, seul. La musique, le label, les pochettes, la direction artistique, le site, le code, les textes. Nuits n’a jamais embauché personne, et sur ce projet le client et l’artiste sont aussi moi, ce qui retire l’excuse habituelle pour un compromis.

L’approche

Le site devait partager un système typographique avec mon portfolio : MADE Dillan pour les titres, Satoshi pour le texte courant, les mêmes tailles et le même interlettrage. Pas parce que la réutilisation est efficace, mais parce que la musique et le travail de design viennent de la même personne et qu’une autre police serait un petit mensonge là-dessus.

Au-delà de la typographie, la règle était que le mouvement sert la sortie, pas le développeur. Chaque page de sortie s’ouvre sur sa pochette et l’animation vous porte jusqu’au morceau, aux crédits et aux liens de streaming. Rien n’arrive en animation pour ensuite rester planté là, ayant prouvé qu’il en était capable.

Trois sorties, c’est un petit catalogue et je ne voulais pas le rembourrer. Un site de trois éléments doit sembler délibérément petit plutôt qu’accidentellement vide, ce qui est un problème de mise en page : de l’espace généreux, de gros caractères, une chose à la fois.

La construction

Astro 7 sur Cloudflare. Chaque page est une sortie statique. Il n’y a pas de données à l’exécution, pas de CMS et pas de travail serveur, donc le site entier est un ensemble de fichiers sur un réseau edge et le premier affichage est aussi rapide que le réseau le permet.

GSAP pilote le travail de timeline et ScrollTrigger pilote les séquences liées au défilement. La règle que j’ai tenue, c’est que l’animation liée au défilement doit être réversible et ne doit jamais prendre le contrôle de la position de défilement elle-même. Le scroll hijacking est la façon la plus rapide de rendre un beau site inutilisable, et il a toujours l’air très bien pour la personne qui l’a construit, parce qu’elle sait où elle va.

C’est dans les shaders que vit l’identité visuelle. Chaque sortie a son propre fragment shader GLSL accordé à la palette de sa pochette, qui tourne sur un plan pleine largeur derrière le contenu. Ils sont peu coûteux par construction : pas de chaîne de post-traitement, pas de render targets, pas de téléversement de textures à chaque image. Un fragment shader qui fait de l’arithmétique sur deux ou trois uniforms ne coûte presque rien sur un GPU moderne, et il produit un mouvement qui n’existe pas sous forme de fichier vidéo, donc il n’y a pas de MP4 de dix mégaoctets à télécharger.

Tout ce qui est coûteux est sous condition. Le plan de shader se met en pause quand il sort du champ, l’animation respecte la préférence de mouvement réduit en repliant les timelines sur leur état final plutôt qu’en les désactivant, et le canvas WebGL est démonté proprement lors des view transitions d’Astro au lieu de laisser fuir un contexte à chaque navigation. Ce dernier point m’a coûté un après-midi et un ordinateur portable très chaud.

Il n’y a pas d’IA dans le site et pas d’IA dans la musique. Pas à cause d’une position que je tiens à défendre longuement, mais parce que tout l’intérêt de l’exercice était que la chose, c’est moi qui l’ai faite.

Le résultat

C’est en ligne sur musicbybaps.com. Trois sorties, chacune avec sa page, chacune renvoyant là où les gens écoutent vraiment.

Le résultat mesurable est négligeable et je ne vais pas le gonfler. Le résultat utile, c’est que le site est devenu l’implémentation de référence du système typographique et de mouvement que j’ai ensuite utilisé sur mon portfolio, si bien que le travail sur les shaders et les transitions s’est payé deux fois.

Ce que je ferais autrement

J’ai écrit un shader distinct par sortie avant d’avoir une interface d’uniforms partagée, donc le deuxième et le troisième étaient des quasi-copies avec les nombres changés. Un seul shader paramétré avec une palette par sortie aurait fait moins de code et plus de cohérence.

Je concevrais aussi pour une quatrième sortie, la prochaine fois. La mise en page de la page d’accueil est réglée pour exactement trois éléments et il faudra la retravailler dès qu’il y en aura une de plus, ce qui est une échéance que je me suis infligée.