Il était une fois Jah — le conte illustré et animé

TL;DR

Il était une fois Jah est un conte illustré, animé et interactif qui raconte Jah à des enfants de cinq ans — et à leurs grands-parents. Il est généré depuis un format de données (conte.json) par un petit moteur réutilisable, puis publié en un seul fichier HTML autonome :

➜ Lire le conte : https://blog.vfg.lol/vfjah/assets/jah/

Le fichier est autonome (aucune dépendance, aucun CDN, aucun serveur requis) : ses illustrations sont des SVG inline, ses animations du CSS, ses interactions du vanilla JS.

Lire le conte

En plein écran (recommandé pour les enfants)

https://blog.vfg.lol/vfjah/assets/jah/

L'embarquer dans une page (iframe)

Le moteur markdown de ce blog échappe le HTML : un article ne peut donc pas contenir d'<iframe> brut (c'est un choix de sécurité, pas un défaut). Et aujourd'hui, le site sert en plus un en-tête X-Frame-Options: DENY : aucune page du blog n'est encadrable, y compris le conte lui-même (mesuré le 2026-09-30). Deux façons de partager le conte :

1. Le lien direct — la voie qui marche partout, tout de suite :

   https://blog.vfg.lol/vfjah/assets/jah/

2. L'iframe — valable seulement sur un hôte qui accepte l'encadrement (une page hors blog.vfg.lol : site perso, kiosque, tableau de bord). Le snippet est prêt ; le jour où l'en-tête sera ajusté pour les assets /vfjah/assets/, il marchera aussi depuis le blog :

<iframe
  src="https://blog.vfg.lol/vfjah/assets/jah/"
  title="Il était une fois Jah"
  width="100%" height="760"
  style="border:0;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.4)"
  loading="lazy" referrerpolicy="no-referrer"
  allow="fullscreen"></iframe>

• URL d'embed : https://blog.vfg.lol/vfjah/assets/jah/
• URL directe : https://blog.vfg.lol/vfjah/assets/jah/
• Taille conseillée : pleine largeur, hauteur ≥ 700 px (le conte défile en interne).
• Si l'iframe reste blanche : c'est X-Frame-Options / CSP frame-ancestors de l'hôte, pas le conte. Ouvrir l'URL directe.

Ce que contient le conte

• La porte qui n’ouvre qu’aux amis — 4 bloc(s)
• Le village derrière les fenêtres — 7 bloc(s)
• Gandalf le Magique arrive — 4 bloc(s)
• Les douze étoiles de la promesse — 3 bloc(s)
• La Brume Grise et le Chiffon Rouge — 4 bloc(s)
• Le grand livre des promesses tenues — 11 bloc(s)
• La tour des heures et la roue du fun — 6 bloc(s)
• La veilleuse qui dit « prêt » — 3 bloc(s)

Comment il a été fabriqué

Le conte n'est pas écrit en HTML à la main : c'est des données. Le dossier du projet contient :

node scripts/forge.mjs stories/jah/conte.json --test
node scripts/forge.mjs stories/jah/conte.json --check   # CI : rien ne doit diverger

Les briques réutilisables (blocs)

Le moteur connaît onze types de blocs, décrits dans SPEC-CONTE.md : act, image (SVG inline), wizz (fenêtre MSN qui tremble), desk (fenêtres déplaçables), constellation (étoiles cliquables), metamorphose, clock, wheel, book, lights, gate. Un nouveau conte = un conte.json, pas une ligne de moteur.

Le conte, en un paragraphe

Et du magicien à la grande barbe blanche qui venait réparer les choses, la nuit.

C'est l'histoire d'un village-câlin habillé en vieux MSN 2005, d'un papillon nommé didou, et d'un magicien à la grande barbe blanche, Gandalf le Magique, qui répare les choses la nuit. Dessous, tout est vrai : le Wizz qui ne compte que rendu, les douze promesses de la Charte, la chenille qui devient papillon (le déploiement en mode maintenance), les lumières éteintes exprès et la Boum du vendredi qui, elle, est bien allumée.

Métadonnées

Conte : une fiction. Les noms et les lieux (STATUS, /readyz, la Charte, R2, le cutover) sont réels ; Gandalf est une allégorie des agents architectes et implémenteurs — il ne faut pas le chercher dans le code.