Projet 05 · IA interactive / Technologie créative / Interface expérimentale
Et si ouvrir un livre pouvait vous transporter dans l’histoire ?
Je voulais recréer un sentiment d'enfance : ouvrir un livre et souhaiter pouvoir entrer directement dans le monde à travers ses pages. The Magical Book transforme cette idée en une expérience Web interactive reliant la narration, la vidéo générative et l'interaction spatiale.
Démo
D'un livre fermé à dix mondes.
Enregistré à partir de l’expérience en cours. 2 min 32 s, pas de son.
Intention
Il n’a jamais été question de créer un autre site Web historique. L'objectif était de tester si une expérience de navigation pouvait donner à quelqu'un l'impression qu'un livre magique physique l'avait remarqué, s'était ouvert et était devenu un portail.
Les anti-objectifs ont été écrits avant la première ligne de code : cela ne doit pas ressembler à une landing page, un diaporama, un carrousel, une galerie vidéo, un site d'information de musée, un tableau de bord, une collection de cartes, un site pédagogique avec des pins cliquables ou une application React standard. Les dix premières secondes devaient mériter un enregistrement d’écran.
Une règle comptait plus que les autres : la sélection des civilisations est explicite. Le livre ne jette jamais le visiteur dans un monde aléatoire. Il montre les dix, vous permet de regarder et attend une décision.
Les mondes
Chaque monde porte une période, un slogan, trois découvertes écrites et une note indiquant que les scènes sont des reconstructions d'inspiration historique plutôt que des enregistrements. Carthage a d'abord été construite comme un voyage de référence et le système a ensuite été appliqué aux neuf autres ; L’Égypte ancienne a servi de clip de référence pour la recherche en profondeur et en vidéo spatiale.
c. 9e au 2e siècle avant notre ère
Maîtres de la Méditerranée.
c. Du 8ème siècle avant notre ère au 5ème siècle de notre ère
Promenez-vous dans la Ville éternelle.
c. 3100 à 30 avant notre ère
Suivez la rivière dans l'éternité.
c. 8ème au 2ème siècle avant notre ère
Où les idées sont entrées dans la vie publique.
c. 19e au 6e siècle avant notre ère
Entrez dans la ville derrière la porte bleue.
221 avant notre ère à 1912 de notre ère
Au-delà de la porte se trouve un empire de plusieurs époques.
c. 12e au 19e siècle de notre ère
Suivez le chemin sous les pétales qui tombent.
c. 322 à 185 avant notre ère
Un empire relié par des routes, des messages et des règles.
c. 250 à 900 CE
Une ville surgit de la forêt tropicale.
c. 793 à 1066 CE
Naviguez au-delà du bord de la carte connue.
Expérience
Images fixes de la démo enregistrée. Chaque image ci-dessous est la véritable expérience.
Un livre fermé sur une scène sombre. Rien ne demande un clic ; la page attend que vous vous rapprochiez.
La position du pointeur détermine la pose du guide et l'attention du livre avant d'appuyer sur quoi que ce soit.
Un clic délibéré. La couverture se soulève et la lumière s'échappe des pages.
Dix destinations apparaissent comme une constellation de portails et non comme une grille de cartes.
La sélection est explicite. Concentrer un portail en donne un aperçu ; seul un deuxième acte engage le voyage.
Le guide se lance à partir de la position réelle de l'écran du portail ; l'itinéraire ne change qu'une fois l'écran couvert.
Des anneaux dorés font surface à cause de la proximité et du temps du chapitre. Une recherche ne déclenche jamais une découverte par accident.
Le texte est la deuxième récompense : un glyphe discret offre à la chronique un moment dans chaque chapitre de découverte.
Le monde se comprime dans un portail qui rétrécit et est réabsorbé dans le livre, qui atterrit sur la même civilisation.
Conception d'interactions
Le guide répond à la position du pointeur, à la direction et à la distance. Cinq poses créées sont sélectionnées à partir du cadre du pointeur et fondues enchaînées entre deux plaques verrouillées, de sorte que le personnage regarde vers vous, vers le livre, ou vous invite à entrer, et ne se casse jamais.
Le livre est un personnage, pas une navigation. Il dort, remarque le pointeur à distance, se réveille à mesure que vous approchez, se prépare et s'ouvre d'un seul clic délibéré. Les seuils comportent une hystérésis afin que son attention ne scintille jamais vers une frontière.
L'ouverture du livre révèle toute la collection de destinations avant le début de tout voyage. Les portails sont des formes organiques et fuyantes avec le guide flottant parmi eux ; en concentrer un le prévisualise, le sélectionner valide.
Les scènes historiques générées sont combinées avec l'interaction du navigateur, de sorte que le déplacement de la souris déplace la caméra avec une véritable parallaxe. Il s’agit d’une interaction cinématographique spatiale de type 360 sur un plan déplacé en profondeur, plus proche de la navigation dans un environnement que du visionnage d’un clip. Il ne s’agit pas d’une véritable vidéo à 360 degrés, et l’expérience ne le prétend jamais.
Technique
Une machine à états suit la position du visiteur, contrôle les transitions et charge chaque vidéo à l’avance.
bootingdarknessguide-idleguide-followingbook-sleepingbook-awarebook-awakeningbook-readybook-openingworlds-emergingatlas-idleatlas-navigatingworld-focusedflight-preparingflight-launchingportal-crossingcivilization-arrivingchapter-playingchapter-pausedchronicle-openreturn-preparingreturningbook-restoringLes transitions sont une table de contiguïté explicite. Le voyage de retour ferme la boucle sur l'atlas, pas l'intro, avec la même civilisation centrée. Les modifications d'itinéraire (actualisation, hachage, échappement) restaurent l'état à partir de l'URL.
Une machine à états gardée avec 23 états nommés et une table de transition explicite. Les transitions illégales renvoient false, ce qui évite les doubles clics, les animations en double et deux guides à l'écran.
Un seul écouteur de pointeur au niveau de la fenêtre et une boucle d'image d'animation publient une image lissée (position, vitesse, direction, proximité du livre et du guide, temps d'inactivité, drapeau tactile) aux abonnés qui écrivent directement dans le DOM. Aucun état de réaction par déplacement de la souris.
Cinq plaques de pose auditées (neutre, regarder à gauche, regarder à droite, regarder le livre, invitant) choisies en fonction de la direction et de la proximité du pointeur, fondues enchaînées sur 320 ms entre deux couches verrouillées par ancre afin qu'un changement de pose ne puisse jamais clignoter.
Trois seuils de proximité de pointeur avec hystérésis pilotent un réducteur de livre à neuf états : inactif, remarque, réveil, prêt, ouverture. Un clic effectué alors que le support est encore en cours de chargement est mis en file d'attente et honoré dès que le livre est prêt.
La concentration et la sélection sont des actes distincts. La focalisation d'un portail met uniquement à jour l'itinéraire ; le sélectionner doit passer la garde de l'État, de sorte qu'un monde ne peut jamais être pénétré en cours d'animation ou par accident.
Chorégraphie Framer Motion tirée du rectangle d'écran mesuré du portail, teinté par civilisation, avec une vidéo de transfert de guide. L'échange d'itinéraire ne se déclenche qu'une fois que l'écran est entièrement couvert.
Chacun des dix mondes comporte trois hotspots créés. Les découvertes se révèlent de quatre manières : toujours, avec le pointeur proche, par chapitre ou par guide, et le fait d'appuyer se distingue du glisser, donc regarder autour de soi n'en ouvre jamais.
Le texte de la chronique s'ouvre à partir d'un glyphe retardé dans les chapitres de découverte et possède la touche Échap lorsqu'il est visible. L'histoire est la deuxième récompense, après l'environnement.
Le monde visible se comprime en un portail qui rétrécit tandis qu'un petit livre s'élève pour le recevoir ; la constellation est restaurée en dessous avec la même civilisation concentrée.
Les auditeurs en direct pour les pointeurs préférés à mouvement réduit et grossiers définissent un budget de particules à trois niveaux (complet, réduit, désactivé). La visibilité des onglets interrompt l'animation. La réduction des mouvements adoucit les transitions mais ne détourne jamais le visiteur vers un repli statique.
Un seul manifeste d’actifs est le seul module autorisé à importer des médias. Les plaques de pose sont préchauffées, la vidéo du livre est préchargée uniquement à titre d'indice de métadonnées et les vidéos de scène sont explicitement supprimées (pause, suppression de la source, rechargement) lors du voyage.
Les clips générés sont lus sur un plan three.js déplacé par une texture de profondeur par image, afin que la caméra puisse dériver et se déplacer avec une véritable parallaxe. Une échelle à quatre niveaux (sensible à la profondeur, multiplan en couches, panoramique-zoom plat, affiche) rétrograde automatiquement lorsque la fréquence d'images diminue. Jamais de véritable 360 degrés, et le code le dit.
Échelle de l'expérience
Cinquante extraits de chapitres (cinq par civilisation) plus un livre, un guide et des séquences de vol : 95 vidéos générées au total, 30 découvertes écrites, une machine d'état gardée.
Pile
Vérifié à partir des manifestes et de la source du projet. Pas de bibliothèque de routeurs, pas de bibliothèque d'état, pas de framework CSS : un routeur de hachage roulé à la main, un ensemble d'abonnés et du CSS simple.
Expérimentation
Une cinquantaine de vidéos ont été générées à travers les dix civilisations, puis le véritable travail a commencé : rendre les séquences cinématographiques statiques interactives. Plusieurs approches n’ont pas survécu.
La partie intéressante n’était pas de générer les scènes. Il s'agissait de trouver comment faire en sorte que les scènes générées ressemblent à un monde dans lequel l'utilisateur était entré.