Projets Compétences Méthode IA Parcours Contact

ProjetsProduits & applications

LaYony

Un lecteur, des paroles traduites en cinq langues, une communauté et des jeux en temps réel, au même endroit, pour les fans de Kenshi Yonezu. Une application que j'utilise moi-même.

Projet de fans indépendant, sans lien officiel avec l'artiste ni ses labels.

LaYony, couverture
Rôle
Concept, UX/UI, développement
Contexte
Projet de fans indépendant
Plateforme
Web mobile
Outils
React, Vite, Web Audio, Supabase Realtime
Année
2026
Statut
Prototype

L'expérience

Ce que l'on vit dans le produit, capture par capture.

Accueil de LaYony avec le compte à rebours du concert de Paris
L'accueil et le compte à rebours.
Choix de la date de concert pendant l'inscription
Choisir son concert.
Le compte à rebours

J-109 avant Paris.

À l'inscription, chaque fan choisit sa date de la tournée GHOST. L'accueil compte les jours, relaie l'actualité de la tournée et garde la musique à portée de pouce.

Paroles synchronisées en plein écran, en japonais avec traduction française
Paroles synchronisées, en style suisse.
Les paroles

Comprendre chaque ligne, en cinq langues.

Les paroles défilent en rythme, ligne par ligne, en japonais, rōmaji, français, anglais ou espagnol. Un plein écran en style suisse, sans distraction : ici, on vient lire.

Partie de quiz en cours contre trois bots, avec chrono commun
Le quiz, chrono commun.
Présentation du blind test Devine le son
Devine le son.
Les jeux en ligne

Même chrono pour tous, de 2 à 4 fans.

Le Quiz Yonezu et Devine le son se jouent en temps réel : partie rapide, salle privée par code ou entraînement contre des bots. La vitesse de réponse rapporte des points bonus.

L'Affiche du mois, classement des fans par temps d'écoute
L'Affiche du mois.
La Commu : fans en écoute et publication d'un post
La Commu.
La Commu et L'Affiche

Le top des écouteurs, affiché comme un concert.

Un fil pour partager playlists, traductions et souvenirs, et une affiche mensuelle qui classe les fans selon leur temps d'écoute. Chacun voit sa place, et ce qu'il lui reste pour y figurer.

Le pointde départ

Les fans s'éparpillent entre streaming, sites de paroles et réseaux sociaux. En attendant un concert, il n'y a pas d'endroit pour écouter, comprendre ce qu'on écoute et le partager.

Pour qui

Des fans francophones, et d'ailleurs, qui veulent comprendre les paroles, se retrouver et compter les jours avant un concert. J'en fais partie.

Contraintes

  • Droits musicaux et paroles sous licence
  • API Spotify limitée en mode développeur
  • Tout doit tenir dans un seul fichier léger

User stories

Trois besoins concrets, et la réponse que le produit y apporte.

  1. En tant que fan francophone, je veux comprendre les paroles pendant que j'écoute, afin de saisir le sens des chansons, pas seulement leur mélodie.

    Réponse du produitDes paroles synchronisées ligne par ligne, en cinq langues, en plein écran.

  2. En tant que fan qui attend le concert de Paris, je veux compter les jours avec d'autres fans, afin de partager l'attente au lieu de la vivre seul.

    Réponse du produitUn compte à rebours personnel, La Commu et L'Affiche du top des écouteurs.

  3. En tant que fan joueur, je veux défier d'autres fans en temps réel, afin de tester ma culture et rencontrer la communauté.

    Réponse du produitUn quiz et un blind test de 2 à 4 joueurs, avec chrono commun et salles privées.

  1. Étape 01

    Partir de mon propre manque

    J'ai rédigé un cahier de conception à partir de ce qui me manquait : lecteur, paroles et traductions, compte à rebours du concert, playlists partagées, tendances du mois, affiche du top des écouteurs, badge mensuel.

    • Cahier des exigences
    • User stories
    • Benchmark Spotify
  2. Étape 02

    Choisir un langage visuel qui dit « fan »

    Le néo-brutalisme pour l'énergie de la communauté : contours noirs, ombres dures, couleurs franches. Les paroles, elles, passent en style suisse sur fond uni, parce qu'on vient les lire.

    • Système visuel
    • Typographie (Archivo, Dela Gothic One)
    Décision clé

    Une ombre dure veut dire « cliquable ». Le style devient une règle d'affordance, pas une décoration.

  3. Étape 03

    Caler les paroles sur la musique

    Des pistes de démo originales jouées en Web Audio : l'horloge audio synchronise les paroles ligne par ligne, en japonais, rōmaji, français, anglais et espagnol.

    • Web Audio
    • Paroles synchronisées
    • Multilingue
    Décision clé

    Pistes et paroles de démo originales tant que les licences ne sont pas en place : on teste l'expérience sans enfreindre les droits.

  4. Étape 04

    Faire jouer les fans ensemble

    Un quiz et un blind test de deux à quatre joueurs en temps réel : file d'attente, salles privées par code, chrono commun tenu par l'hôte (le suivant reprend s'il part), et des bots pour s'entraîner quand personne n'est en ligne.

    • Game design
    • Supabase Realtime
    • Tests
  5. Étape 05

    Préparer la V1

    Brancher Spotify (catalogue, pochettes, lecture), obtenir une licence de paroles, puis ouvrir La Commu avec une vraie modération.

    • Roadmap
    • Modération

Le rendu

Écran d'accueil de LaYony sur ordinateur
L'arrivée : « En attendant le concert. »
Écran de bienvenue de LaYony
Bienvenue, fan.
La musique
Pistes de démo jouables.
Les jeux
Les jeux de La Commu.

Le bilan

5langues pour les paroles
2 à 4joueurs en temps réel
1seul fichier HTML à la sortie

Un prototype complet et utilisable, construit pour être branché sur de vraies sources dès que les licences le permettront.

Ce que j'en retiens

Mélanger deux styles opposés marche quand chacun a un rôle : le brutalisme pour agir, le style suisse pour lire.