Comment Boi a été fabriqué

Le concept

Boi signifie « le jour ; le soleil ». C'est un récit à défilement (« scrollytelling ») : une journée duun en six moments — l'aube, le champ, le marché, le repas, le soir, la nuit. Pendant que vous faites défiler, le soleil traverse réellement le ciel, les couleurs passent de l'aurore au bleu du jour puis à la nuit étoilée, et la lune se lève.

Les données

• 48 phrases d'exemple réelles (8 par moment), choisies par mots-clés dans leurs traductions françaises (_tools/precompute2.py), toutes avec leur enregistrement.

La technique

• Le ciel est un dégradé CSS piloté par le défilement : 7 « images-clés » de couleurs (ciel haut/bas, deux collines, position du soleil, opacité des étoiles) interpolées en JavaScript — skyAt(progress).
• Les collines sont deux SVG dessinés à la main (cases et greniers en silhouette), en parallaxe de teinte plutôt que de position pour rester fluide.
• Les phrases apparaissent avec IntersectionObserver ; la lune est un croissant en pur CSS (deux cercles superposés).
• PWA hors ligne via le socle _shared/ ; zéro bibliothèque.

Fabriqué avec Claude (Anthropic).