Projekt 05 · Interaktive KI / kreative Technologie / experimentelle Schnittstelle
Was wäre, wenn Sie beim Öffnen eines Buches in die Geschichte eintauchen könnten?
Ich wollte ein Kindheitsgefühl nachbilden: Ich öffne ein Buch und wünschte, ich könnte auf seinen Seiten direkt in die Welt eintauchen. The Magical Book verwandelt diese Idee in ein interaktives Web-Experiment, das Storytelling, generatives Video und räumliche Interaktion verbindet.
Demo
Von einem Buch mit sieben Siegeln zu zehn Welten.
Aufgezeichnet vom laufenden Experiment. 2 Min. 32 Sek., kein Ton.
Absicht
Dabei ging es nie darum, eine weitere Geschichtswebsite zu erstellen. Ziel war es zu testen, ob ein Browser-Erlebnis jemandem das Gefühl geben kann, dass ein physisches magisches Buch ihn bemerkt hat, sich geöffnet hat und zu einem Portal geworden ist.
Die Gegenziele wurden vor der ersten Codezeile niedergeschrieben: Es darf sich nicht wie eine Landingpage, eine Diashow, ein Karussell, eine Videogalerie, eine Museumsinformationsseite, ein Dashboard, eine Kartensammlung, eine Bildungsseite mit anklickbaren Pins oder eine Standard-React-Anwendung anfühlen. Die ersten zehn Sekunden musste eine Bildschirmaufnahme verdient werden.
Eine Regel war wichtiger als die anderen: Die Auswahl der Zivilisation ist explizit. Das Buch wirft den Besucher niemals in eine zufällige Welt. Es zeigt alle zehn, lässt Sie schauen und wartet auf eine Entscheidung.
Die Welten
Jede Welt trägt eine Epoche, einen Slogan, drei verfasste Entdeckungen und den Hinweis, dass es sich bei den Szenen eher um historisch inspirierte Rekonstruktionen als um Aufzeichnungen handelt. Karthago wurde zunächst als Goldstandardreise errichtet und das System wurde dann auf die übrigen neun angewendet; Das alte Ägypten diente als Referenzclip für die Tiefen- und Raumvideorecherche.
c. 9. bis 2. Jahrhundert v. Chr
Meister des Mittelmeers.
c. 8. Jahrhundert v. Chr. bis 5. Jahrhundert n. Chr
Spazieren Sie durch die Ewige Stadt.
c. 3100 bis 30 v. Chr
Folge dem Fluss in die Ewigkeit.
c. 8. bis 2. Jahrhundert v. Chr
Wo Ideen Einzug ins öffentliche Leben hielten.
c. 19. bis 6. Jahrhundert v. Chr
Betreten Sie die Stadt hinter dem blauen Tor.
221 v. Chr. bis 1912 n. Chr
Hinter dem Tor liegt ein Reich aus vielen Epochen.
c. 12. bis 19. Jahrhundert n. Chr
Folgen Sie dem Pfad unter den fallenden Blütenblättern.
c. 322 bis 185 v. Chr
Ein Reich, das durch Straßen, Botschaften und Herrschaft verbunden ist.
c. 250 bis 900 n. Chr
Aus dem Regenwald erhebt sich eine Stadt.
c. 793 bis 1066 n. Chr
Segeln Sie über den Rand der bekannten Karte hinaus.
Erfahrung
Standbilder aus der aufgenommenen Demo. Jeder Frame unten ist das eigentliche Experiment.
Ein geschlossenes Buch auf einer dunklen Bühne. Nichts verlangt nach einem Klick; Die Seite wartet darauf, dass Sie näher kommen.
Die Zeigerposition steuert die Haltung des Führers und die Aufmerksamkeit des Buches, bevor etwas gedrückt wird.
Ein bewusster Klick. Der Einband hebt sich und Licht strömt von den Seiten.
Zehn Ziele entstehen als Konstellation von Portalen, nicht als Kartenraster.
Die Auswahl ist explizit. Wenn Sie ein Portal fokussieren, wird eine Vorschau angezeigt. Erst ein zweiter Akt verpflichtet zur Reise.
Der Leitfaden wird von der tatsächlichen Bildschirmposition des Portals aus gestartet. Die Route ändert sich erst, wenn der Bildschirm abgedeckt ist.
Aus Nähe und Kapitelzeit tauchen goldene Ringe auf. Ein Blick in die Umgebung führt nie zufällig zu einer Entdeckung.
Text ist die zweite Belohnung: Eine stille Glyphe bietet der Chronik einen Moment in jedem Entdeckungskapitel.
Die Welt komprimiert sich zu einem schrumpfenden Portal und wird wieder in das Buch aufgenommen, das auf derselben Zivilisation landet.
Interaktionsdesign
Die Führung reagiert auf Zeigerposition, Richtung und Entfernung. Fünf erstellte Posen werden aus dem Zeigerrahmen ausgewählt und zwischen zwei mit Ankern befestigten Platten überblendet, sodass die Figur zu Ihnen oder zum Buch schaut oder Sie einlädt, ohne zu schnappen.
Das Buch ist ein Charakter, keine Navigation. Es schläft, bemerkt den Zeiger aus der Ferne, erwacht, wenn Sie sich nähern, ist bereit und öffnet sich mit einem bewussten Klick. Schwellenwerte verfügen über eine Hysterese, sodass die Aufmerksamkeit nie auf eine Grenze gelenkt wird.
Beim Öffnen des Buches wird die gesamte Sammlung der Reiseziele sichtbar, bevor die Reise beginnt. Portale sind organische, zurückweichende Formen, zwischen denen der Führer schwebt; Durch Fokussieren wird eine Vorschau angezeigt, durch Auswählen wird ein Commit ausgeführt.
Generierte historische Szenen werden mit Browser-Interaktion kombiniert, sodass durch Bewegen der Maus die Kamera mit echter Parallaxe verschoben wird. Es handelt sich um eine 360-Grad-ähnliche räumliche filmische Interaktion auf einer tiefenverschobenen Ebene, die dem Navigieren in einer Umgebung näher kommt als dem Ansehen eines Clips. Es handelt sich nicht um ein echtes 360-Grad-Video, und das Experiment behauptet dies auch nie.
Technisch
Eine Zustandsmaschine verfolgt, wo sich der Besucher befindet, steuert Szenenübergänge und lädt Videos rechtzeitig vor.
bootingdarknessguide-idleguide-followingbook-sleepingbook-awarebook-awakeningbook-readybook-openingworlds-emergingatlas-idleatlas-navigatingworld-focusedflight-preparingflight-launchingportal-crossingcivilization-arrivingchapter-playingchapter-pausedchronicle-openreturn-preparingreturningbook-restoringÜbergänge sind eine explizite Adjazenztabelle. Die Rückreise schließt die Schleife des Atlas, nicht das Intro, und konzentriert sich auf dieselbe Zivilisation. Routenänderungen (Aktualisierung, Hash, Escape) wiederherstellen den Status von der URL.
Eine geschützte Zustandsmaschine mit 23 benannten Zuständen und einer expliziten Übergangstabelle. Unzulässige Übergänge geben „false“ zurück, wodurch Doppelklicks, doppelte Animationen und zwei Hilfslinien auf dem Bildschirm verhindert werden.
Ein einzelner Zeiger-Listener auf Fensterebene und eine Animations-Frame-Schleife veröffentlichen einen geglätteten Frame (Position, Geschwindigkeit, Richtung, Nähe zu Buch und Anleitung, Leerlaufzeit, Touch-Flag) an Abonnenten, die direkt in das DOM schreiben. Kein Reaktionsstatus pro Mausbewegung.
Fünf geprüfte Posenplatten (neutral, nach links schauen, nach rechts schauen, das Buch ansehen, einladend), ausgewählt aus Zeigerrichtung und -nähe, über 320 ms zwischen zwei ankergesperrten Ebenen überblendet, sodass ein Posenwechsel niemals blinken kann.
Drei Zeigernäheschwellenwerte mit Hysterese steuern einen Buchreduzierer mit neun Zuständen: Leerlauf, Bemerken, Erwachen, Bereit, Öffnen. Ein Klick, der gemacht wird, während das Medium noch geladen wird, wird in die Warteschlange gestellt und berücksichtigt, sobald das Buch fertig ist.
Fokussierung und Auswahl sind getrennte Handlungen. Durch das Fokussieren eines Portals wird lediglich die Route aktualisiert. Die Auswahl muss durch die Staatsgarde erfolgen, sodass eine Welt niemals mitten in der Animation oder versehentlich betreten werden kann.
Framer Motion Choreografie basierend auf dem vermessenen Bildschirmrechteck des Portals, getönt je nach Zivilisation, mit einem Guide-Übergabevideo. Der Routentausch wird erst ausgelöst, wenn der Bildschirm vollständig bedeckt ist.
Jede der zehn Welten verfügt über drei erstellte Hotspots. Entdeckungen werden auf vier Arten angezeigt: immer, zeigernah, kapitelweise oder Führer-Entdeckung, und Tippen unterscheidet sich vom Ziehen, sodass ein Umsehen niemals eine Entdeckung öffnet.
Chroniktext wird über eine verzögerte Glyphe in Entdeckungskapiteln geöffnet und verfügt über die Escape-Taste, solange er sichtbar ist. Die Geschichte ist nach der Umgebung die zweite Belohnung.
Die sichtbare Welt verdichtet sich zu einem schrumpfenden Portal, während ein kleines Buch sich erhebt, um sie aufzunehmen; Die Konstellation wird darunter wiederhergestellt, wobei dieselbe Zivilisation im Mittelpunkt steht.
Live-Zuhörer für Preferences-Reduced-Motion- und Grobzeiger legen ein dreistufiges Partikelbudget fest (voll, reduziert, aus). Die Tab-Sichtbarkeit pausiert die Animation. Reduzierte Bewegung macht Übergänge weicher, lenkt den Besucher jedoch nie in einen statischen Rückfall ab.
Ein einzelnes Asset-Manifest ist das einzige Modul, das Medien importieren darf. Pose-Platten sind vorgewärmt, das Buchvideo ist nur als Metadaten-Hinweis vorgeladen und Szenenvideos werden während der Fahrt explizit heruntergefahren (Pause, Quelle löschen, neu laden).
Erzeugte Clips werden auf einer 3.js-Ebene abgespielt, die durch eine Tiefentextur pro Frame verschoben wird, sodass die Kamera mit echter Parallaxe driften und schwenken kann. Eine vierstufige Leiter (Tiefenerkennung, geschichtete Multiebene, flacher Schwenk-Zoom, Poster) wird automatisch herabgestuft, wenn die Bildrate sinkt. Nie echte 360 Grad, und der Code sagt es so.
Maßstab des Experiments
Fünfzig Kapitelausschnitte (fünf pro Zivilisation) plus Buch-, Reiseführer- und Flugmaterial: insgesamt 95 generierte Videos, 30 verfasste Entdeckungen, eine bewachte Staatsmaschine.
Stapel
Überprüft anhand der Manifeste und Quellen des Projekts. Keine Router-Bibliothek, keine Statusbibliothek, kein CSS-Framework: ein handgerollter Hash-Router, ein Abonnentensatz und einfaches CSS.
Experimentieren
Über die zehn Zivilisationen hinweg wurden rund fünfzig Videos erstellt, dann begann die eigentliche Arbeit: statische, filmische Aufnahmen interaktiv wirken zu lassen. Mehrere Ansätze überlebten nicht.
Das Interessante daran war nicht, die Szenen zu generieren. Es ging darum herauszufinden, wie man generierte Szenen wie eine Welt wirken lässt, die der Benutzer betreten hat.