Le contexte : un p’tit raoût entre amis
Depuis presque 10 ans, la fanfare de Chantelle et 2LDC organisent Bouge Ton Bouble à Chantelle, dans l’Allier, au bord de la Bouble. Une dizaine de fanfares, trois scènes, une centaine de bénévoles, et tout le village qui se transforme en scène à ciel ouvert. Je fais partie de l’orga.
Dans une asso de bénévoles, chacun met la main à la pâte avec ce qu’il sait faire. Moi, je dessine, j’anime et je code. Alors j’ai pris en charge toute l’image du festival : l’affiche, la mascotte, l’animation pour les réseaux… et le site.
Ce projet, c’est le seul où mes deux casquettes se retrouvent du début à la fin, sur le même sujet.
Bob, d’abord
Toute l’identité tourne autour de Bob : un gros bonhomme tout rose, vu de dos, les fesses à l’air. Il tenait déjà l’affiche de BTB#8 et de toutes les éditions précédentes, c’est notre leitmotiv, et il ne nous lâche plus.
Le tout premier Bob n’avait même pas de tête. Pour BTB#9, je l’ai entièrement redessiné : coupe mulet, poils dessinés boucle par boucle, et petites jambes qui le font tenir debout.
Autour de lui, tout est dessiné à la main dans Illustrator, avec une palette de sept couleurs et une bibliothèque Creative Cloud partagée :
- l’affiche de chaque édition, avec ses calques bien rangés (nuages, date, titre, fanfares, sponsors, décor) ;
- le logo-nuage BTB, le tampon, les maisons, les arbres, le moulin ;
- les pancartes de toutes les fanfares invitées, chacune à sa couleur ;
- le bingo des fanfares, on en reparle plus bas.
L’animation pour Insta
Pour annoncer BTB#9, il fallait une vidéo verticale qui claque : 15 secondes en 1080 × 1920, montée dans After Effects à partir des illustrations.
Bob arrive en marchant dans le paysage, le nuage de la date apparaît, « BTB » rebondit en 3D lettre par lettre, et des éclaboussures de couleur jaillissent sur le rythme.
Et c’est là que le dev rejoint le motion. Plutôt que de caler des dizaines d’images clés à la main, j’ai écrit les animations en code, avec des expressions After Effects :
- Les rebonds du titre sont calculés : gravité, élasticité, nombre de rebonds, décalage entre chaque lettre. On change un chiffre en haut du script, et toute l’animation suit.
- La date compte toute seule jusqu’à 29, en accélérant, à partir d’un simple repère posé sur la timeline.
- Les éclaboussures sont des tracés animés, avec des bords irréguliers pour garder l’effet fait main.
Bonus : une seule composition, déclinée pour Instagram et Facebook.
Le site
Le site devait faire trois choses : donner envie de venir, permettre aux fanfares de candidater et aux bénévoles de s’inscrire. Avec le ton du festival : c’est Robert, l’organisateur, qui vous parle. « Hello, je m’appelle Robert. J’organise un p’tit raoût musical avec mes amis. »
Un carnet de croquis
Pour BTB#9, j’ai refait tout le site façon carnet de croquis : papier pointillé, bordures tracées à la main, surlignage au feutre, photos en polaroid, et une police manuscrite pour les petites annotations (« ↖ lui, c’est Bob ! »).
Et ça bouge, mais avec retenue :
- le titre arrive mot par mot, l’affiche se déroule comme un poster qu’on accroche ;
- les vagues sous les titres se dessinent quand on arrive dessus ;
- l’annonce et les partenaires défilent en continu, en CSS pur ;
- les boutons font un petit wiggle au survol, et un oiseau s’envole quand on envoie un message (« Va petit oiseau, porte ce message »).
Tout ça se coupe pour les personnes qui ont réglé leur appareil sur « réduire les animations ».
Ce qu’il y a sous le capot
La stack : SvelteKit et Svelte 5, Tailwind CSS, hébergé sur Vercel.
- Instagram en direct : les derniers posts du festival s’affichent sur le site. Le jeton d’accès expire tous les 60 jours ? Une tâche automatique le renouvelle chaque semaine, sans que personne n’y pense.
- Les photos des éditions passées arrivent directement depuis Lightroom, une page par édition.
- La vidéo ne se charge que lorsqu’elle est à l’écran, pour ne pas plomber la page, avec un bouton pour le son.
- Le formulaire de contact envoie un vrai e-mail (Resend), fonctionne même sans JavaScript, filtre les robots et propose un lien e-mail de secours si l’envoi échoue. Un clic sur « Ta fanfare veut venir ? » ou « Devenir bénévole », et le bon choix est déjà coché.
- Le contenu (éditions, fanfares, partenaires) est rangé dans des fichiers de données à part : ajouter un partenaire, c’est déposer son logo et ajouter une ligne.
Le site est développé en binôme avec Claude Code, un assistant de développement par IA (il a même son icône dans le footer, à côté de la chope de bière). Les dessins, l’animation et la direction artistique restent faits main ; pour le code, je pilote, je relis et je teste, il accélère.
Le bingo
Mon dessin préféré est devenu jouable. Le Bingo BTB#9 est une grille de 25 cases pour les fanfares : « On a fait pleurer une mamie », « On joue un tube de Johnny », « On a fini un contrat en slip »…
Sur le site, on coche les cases directement sur l’illustration. Ligne, colonne ou diagonale complète : BINGO ! On peut alors partager sa grille en image sur Insta, ou l’envoyer à Bob comme candidature. Et ça marche aussi au clavier et au lecteur d’écran, case par case.
Et alors ?
Le festival a enfin un site à son image, aussi bricolé et joyeux que la fête elle-même, et une identité cohérente de l’affiche à la vidéo en passant par le web. Le tout fait maison, bénévolement, entre deux répètes.
Et pour moi, c’est la preuve que le motion et le code ne sont pas deux métiers séparés :
Un rebond, que ce soit dans After Effects ou dans un navigateur, c’est la même physique.
Rendez-vous le 29 mai 2027 à Chantelle. Préparez vos slips.