Project 05 · Interactive AI / Creative Technology / Experimental Interface
What if opening a book could transport you inside history?
I wanted to recreate a childhood feeling: opening a book and wishing I could step directly into the world on its pages. The Magical Book turns that idea into an interactive web experiment connecting storytelling, generative video and spatial interaction.
Demo
From a closed book to ten worlds.
Recorded from the running experiment. 2 min 32 s, no audio.
Intent
This was never about building another history website. The goal was to test whether a browser experience could make someone feel that a physical magical book had noticed them, opened itself and become a portal.
The anti-goals were written down before the first line of code: it must not feel like a landing page, a slideshow, a carousel, a video gallery, a museum information site, a dashboard, a collection of cards, an educational site with clickable pins or a standard React application. The first ten seconds had to earn a screen recording.
One rule mattered more than the others: civilization selection is explicit. The book never throws a visitor into a random world. It shows all ten, lets you look, and waits for a decision.
The worlds
Each world carries a period, a tagline, three authored discoveries and a note that the scenes are historically inspired reconstructions rather than records. Carthage was built first as the gold-standard journey and the system was then applied to the remaining nine; Ancient Egypt served as the reference clip for the depth and spatial-video research.
c. 9th to 2nd century BCE
Masters of the Mediterranean.
c. 8th century BCE to 5th century CE
Walk through the Eternal City.
c. 3100 to 30 BCE
Follow the river into eternity.
c. 8th to 2nd century BCE
Where ideas entered public life.
c. 19th to 6th century BCE
Enter the city behind the blue gate.
221 BCE to 1912 CE
Beyond the gate lies an empire of many eras.
c. 12th to 19th century CE
Follow the path beneath the falling petals.
c. 322 to 185 BCE
An empire connected by roads, messages and rule.
c. 250 to 900 CE
A city rises from the rainforest.
c. 793 to 1066 CE
Sail beyond the edge of the known map.
Experience
Stills from the recorded demo. Every frame below is the real experiment.
A closed book on a dark stage. Nothing asks for a click; the page waits for you to move closer.
Pointer position drives the guide’s pose and the book's attention before anything is pressed.
One deliberate click. The cover lifts and light spills from the pages.
Ten destinations emerge as a constellation of portals, not a grid of cards.
Selection is explicit. Focusing a portal previews it; only a second act commits to the journey.
The guide launches from the portal’s real screen position; the route changes only once the screen is covered.
Golden rings surface from proximity and chapter time. A look-around never fires a discovery by accident.
Text is the second reward: a quiet glyph offers the chronicle a moment into each discovery chapter.
The world compresses into a shrinking portal and is absorbed back into the book, which lands on the same civilization.
Interaction design
The guide responds to pointer position, direction and distance. Five authored poses are selected from the pointer frame and crossfaded between two anchor-locked plates, so the character looks toward you, toward the book, or invites you in, and never snaps.
The book is a character, not navigation. It sleeps, notices the pointer at a distance, awakens as you approach, becomes ready, and opens on one deliberate click. Thresholds carry hysteresis so its attention never flickers at a boundary.
Opening the book reveals the whole collection of destinations before any journey starts. Portals are organic, receding shapes with the guide floating among them; focusing one previews it, selecting it commits.
Generated historical scenes are combined with browser interaction so moving the mouse shifts the camera with real parallax. It is a 360-like, spatial cinematic interaction on a depth-displaced plane, closer to navigating an environment than watching a clip. It is not genuine 360 degree video, and the experiment never claims it is.
Technical
Generation was the easy half. The engineering problem was keeping a cinematic, pointer-driven experience coherent: one source of truth for where the visitor is, guarded transitions, and media that arrives before it is needed.
bootingdarknessguide-idleguide-followingbook-sleepingbook-awarebook-awakeningbook-readybook-openingworlds-emergingatlas-idleatlas-navigatingworld-focusedflight-preparingflight-launchingportal-crossingcivilization-arrivingchapter-playingchapter-pausedchronicle-openreturn-preparingreturningbook-restoringTransitions are an explicit adjacency table. The return journey closes the loop on the atlas, not the intro, with the same civilization focused. Route changes (refresh, hash, Escape) restore state from the URL.
One guarded state machine with 23 named states and an explicit transition table. Illegal transitions return false, which is how double clicks, duplicate animations and two guides on screen are prevented.
A single window-level pointer listener and one animation-frame loop publish a smoothed frame (position, velocity, direction, proximity to book and guide, idle time, touch flag) to subscribers that write straight to the DOM. No React state per mouse move.
Five audited pose plates (neutral, look left, look right, watch the book, inviting) chosen from pointer direction and proximity, crossfaded over 320 ms between two anchor-locked layers so a pose change can never flash.
Three pointer-proximity thresholds with hysteresis drive a nine-state book reducer: idle, noticing, awakening, ready, opening. A click made while media is still loading is queued and honoured the instant the book is ready.
Focus and selection are separate acts. Focusing a portal only updates the route; selecting it must pass the state guard, so a world can never be entered mid-animation or by accident.
Framer Motion choreography driven from the portal’s measured screen rectangle, tinted per civilization, with a guide hand-off video. The route swap fires only once the screen is fully covered.
Each of the ten worlds carries three authored hotspots. Discoveries reveal in four ways: always, pointer-near, chapter-time or guide-discovery, and tap is distinguished from drag so looking around never opens one.
Chronicle text opens from a delayed glyph inside discovery chapters and owns the Escape key while visible. The story is the second reward, after the environment.
The visible world compresses into a shrinking portal while a small book rises to receive it; the constellation is restored beneath with the same civilization focused.
Live listeners for prefers-reduced-motion and coarse pointers set a three-level particle budget (full, reduced, off). Tab visibility pauses animation. Reduced motion softens transitions but never diverts a visitor to a static fallback.
A single asset manifest is the only module allowed to import media. Pose plates are pre-warmed, the book video is preloaded as a metadata hint only, and scene videos are torn down explicitly (pause, drop source, reload) when travelling.
Generated clips play on a three.js plane displaced by a per-frame depth texture, so the camera can drift and dolly with real parallax. A four-tier ladder (depth-aware, layered multiplane, flat pan-zoom, poster) demotes automatically when frame rate drops. Never genuine 360 degrees, and the code says so.
Scale of the experiment
Fifty chapter clips (five per civilization) plus book, guide and flight footage: 95 generated videos in total, 30 authored discoveries, one guarded state machine.
Stack
Verified from the project’s manifests and source. No router library, no state library, no CSS framework: a hand-rolled hash router, a subscriber set and plain CSS.
Experimentation
Around fifty videos were generated across the ten civilizations, then the real work began: making static, cinematic footage feel interactive. Several approaches did not survive.
The interesting part wasn’t generating the scenes. It was figuring out how to make generated scenes feel like a world the user had entered.