kruu — 11:34

Kruu est une artiste indépendante de la scène digicore / hyperpop. Son album "11:34" sort le 6 novembre 2026. J'ai conçu ce site gratuitement et de ma propre initiative, pour accompagner la sortie. Je l'ai présenté à l'artiste, qui l'a adopté comme site officiel de l'album. Il est pensé pour être partagé en "lien dans la bio" et en "story Instagram".

La quasi-totalité des visites arrive donc depuis le navigateur intégré d'Instagram ou de TikTok, sur téléphone. Le site devait être Mobile First, léger, et fonctionner sans serveur.

• Faire pré-enregistrer l'album (pre-save) : c'est l'action principale de la page.
• Créer de l'attente jusqu'à la sortie : compte à rebours, tracklist floutée, visuels qui se révèlent.
• Proposer une direction artistique fidèle à l'univers de l'album, plutôt qu'une landing page générique.
• Rendre l'expérience immersive : écran de chargement, motion, son, interactions.
• Rester simple et respectueux : 100 % statique, aucun cookie, aucun traceur, rien de stocké chez le visiteur.

Direction artistique : Je suis parti des deux pochettes : photos en noir et blanc, flou de mouvement, grain très marqué, et des gribouillis blancs avec une ombre bleu. J'en ai tiré une règle simple : tout en niveaux de gris, une seule couleur (`#C0D8F8`), toujours sous ou à côté du blanc.

Le concept : Le site n'est pas une page, c'est un instant, "11:34 pm", comme le titre de l'album.

Design : Maquettes sur Figma : planche de DA (palette, typographies, bibliothèque de gribouillis, matières), storyboard motion avec timeline et tokens d'animation, 11 écrans mobile et 4 écrans desktop.

Développement : React 19 + TypeScript + Vite, animations avec Motion. Les effets « faits main » sont codés à la main :
- grain animé (bruit pixel par pixel, cadence volontairement basse pour ne pas fatiguer les yeux) ;
- dessin au doigt sur la pochette (Canvas, trait blanc + double bleu qui s'efface) ;
- gribouillis en SVG qui se dessinent au défilement ;
- ambiance sonore (fondus, et génération d'une ambiance de secours si aucun fichier audio n'est fourni).

Tout le contenu qui change (dates, liens, visuels, tracklist) est centralisé dans un seul fichier de configuration.

Méthode : Workflow Gitflow avec une pull request par fonctionnalité. J'ai comparé le site à la maquette écran par écran, à partir de captures automatisées à la même taille, ce qui m'a permis de corriger les écarts : intensité du grain, mises en page, ombres.