Le site d'une chanteuse qui n'existe pas — et qui ne s'en cache pas. Un parcours narratif en douze sections, avec lecteur audio maison, galerie, clips verticaux et boutique. Tout est écrit à la main : trois dépendances au total, aucune librairie d'animation.
Une artiste générée par IA pose une question de ton : faire semblant, ou le dire. Le site choisit la seconde option et en fait sa ligne éditoriale — « Je suis une IA. Écoute. » dès le premier écran, une galerie qui précise elle-même qu'aucune de ses photos n'existe. La direction artistique suit : noir profond, rouge incandescent, typographie d'affiche condensée.
Couleurs, échelle typographique fluide, espacements, halos et rayons vivent dans un unique fichier de tokens. Aucune section ne redéfinit une valeur : elle consomme les variables. Changer l'ambiance du site tient en quelques lignes.
Chaque section porte son fond, sa gouttière, ses halos et son grain — la page d'accueil n'est qu'un assemblage. On peut réordonner le parcours sans toucher au style.
Next, React et React DOM. Pas de GSAP, pas de Framer Motion, pas de kit d'interface : chaque transition, chaque halo et chaque révélation est écrit en CSS.
Le site alterne les registres pour éviter l'effet catalogue : on écoute, on regarde, on parcourt, on achète. Chaque étape a sa propre grammaire visuelle, mais toutes partagent les mêmes tokens.
L'échelle typographique est fluide de 375 à 1920 px : les titres ne « sautent » pas d'un palier à l'autre, ils se redimensionnent en continu. Sur mobile, le portrait passe en fond, le titre se réordonne sous lui et les boutons prennent toute la largeur.
Les effets coûteux sont dégradés plutôt que subis : le flou d'arrière-plan des cartes de verre est remplacé par un fond opaque sous 640 px, et le débordement des visuels hors de leur section est réduit puis annulé. Les animations respectent prefers-reduced-motion.
| Composant | Technologie |
|---|---|
| Framework | Next.js 16 (App Router, Turbopack) |
| Interface | React 19 |
| Styles | CSS Modules + fichier de tokens |
| Typographie | Anton, Inter, Cormorant Garamond |
| Audio | Lecteur maison, sans librairie |
| Langues | FR / EN (dictionnaire unique) |
| Images | next/image, WebP |
| Hébergement | Vercel |