This site is now also an island you can walk

TL;DR #

This site can now be browsed as a point-and-click adventure in the style of the LucasArts games of the 90s. It opens with an intro, then a visitor walks a small island, opens topic books to read posts, takes notes from a notice board to follow links and finds the about page as a letter in a lighthouse, and the game is called The Context Island. You can play it here on a desktop browser.

It is built with:

• OpenAI image models, through Codex, for the art.
• ElevenLabs for the voice, the sound effects and the music.
• A game engine in plain JavaScript and WebGL2, configured by JSON, with no dependencies (game/).
• A lighting engine that composes one drawing per lamp in a shader.
• A sound engine on Web Audio, with synthesized ambience, recorded effects and binaural music.
• A walk rig in Python that moves a cut-out puppet with gait curves (rig_walk.py).
• Hugo, which builds the site and writes its content for the game.

Introduction #

This is the fourth part of a journey I started a couple of weeks ago, when I handed this blog’s stack to my agents, to see what the new generation of models can do. Then I moved to art, starting with images, the illustrated covers of this site. Then came animations, then interactivity, with lamps you can switch on and off and a Halloween scene with a cat you can pet.

At that point I realized we could take one step further and try to mimic an adventure game, and even the design of the covers pushed me there. I am not a gamer, but I loved the LucasArts games so much. They always inspired me for their aesthetic and their mood.

I played Monkey Island from the first to the third, and I watched them evolve from a bunch of colours and synthetic sounds to advanced graphics, sound and voices. Everything was stunning in that era, from the 386 to the 486 and the first audio card, the mythical Sound Blaster Pro. Pure magic.

The rules #

I came up with the idea on 1 November while I was out for a walk, and I dictated it to Claude in Italian. Before any code, I set some rules:

• Not an easter egg, but an alternative way to navigate the site.
• Monkey Island concepts, with the same art line as the covers.
• Lights and atmosphere first, rendered with WebGL.
• Articles readable inside the game, rendered by the browser and not redrawn in pixels.
• Desktop only, no mobile version for now.
• An engine configured by JSON, kept separate from the site, so that one day it can work on any site, but without abstracting it too much in a prototype.
• Only Claude and Codex as AI models, the rule I already had for the covers. ElevenLabs, for the voices, the sounds and the music, became the one exception.

The site and the game share only the build. Hugo writes a content.json with posts, links and pages, and the engine reads it together with a hand-written world.json and the room drawings. The whole game can be removed in a single change, and the site then builds byte for byte as before (docs/adventure.md).

The intro #

The intro is only data. world.json lists its shots, each with a room, a time of day, a duration, its credit lines and optional sound cues, plus the music that plays under all of them.

The engine plays each shot as a room without the visitor or the panel, with the same lights and the same moving sea, and cross-fades from one shot to the next. Each credit line gets an equal part of its shot and fades in and out, drawn by the text layer with the book’s pixel font in a dark band at the bottom of the screen.

A sound cue plays at its second of the shot. A click starts the game at any point, the last shot waits for one, and R plays the intro again from the first shot.

The music comes from ElevenLabs Music, and the browser plays it binaurally, through two Web Audio HRTF panners that slowly drift around your head.

The music bus is split into its left and right channels, and each one feeds a virtual speaker in front of the listener, about 40 degrees to its side. A very slow oscillator, at 0.04 Hz, sways each speaker left and right, so on headphones the music moves gently around you (sound.js):

binaural(c) {
  if (
    !c.createPanner ||
    !c.createChannelSplitter ||
    !c.createOscillator
  )
    return null;
  const split = c.createChannelSplitter(2);
  [-1, 1].forEach((side, channel) => {
    const panner = c.createPanner();
    panner.panningModel = "HRTF";
    panner.positionX.value = side * Math.sin(0.7);
    panner.positionZ.value = -Math.cos(0.7);
    const drift = c.createOscillator();
    const depth = c.createGain();
    drift.frequency.value = 0.04;
    depth.gain.value = side * 0.25;
    drift.connect(depth);
    depth.connect(panner.positionX);
    drift.start();
    split.connect(panner, channel);
    panner.connect(this.master);
  });
  return split;
}

The island #

The island is the world of the covers, the sea, the stone house, the lighthouses and the rose shipping container on the quay, reduced to 90s pixels. There are four places to visit.

• The study in the stone house, where the bookshelf holds six topic books (Linux, AI, Docker, Security, Workstation and Personal). Each opens in a close-up with its table of contents, and the pages turn with a curl.
• The harbour, where a notice board holds the links as pinned papers you can read, follow or take.
• The lighthouse, where a letter on the desk is the about page and a logbook lists my talks.
• The island map, which connects the three places.

Articles open in a reader at the browser’s own resolution, with the site’s fonts, and every close-up shows which section of the site you are in, with a link to the normal page. The things you take go in the inventory and stay there on your next visit. It is the second thing on this site that uses the browser’s storage, and Forget empties it.

How it is drawn #

The frame is 640×360 game pixels with 256 colours, scaled by whole numbers, so it is three times bigger on a 1080p screen. The first version ran at 320×180 with 32 colours. I found it too low, with too few colours, and I asked for 256, then for a higher resolution that still felt like the 90s.

Light is the part I cared about most. Each room is drawn several times, with every lamp off and then with each lamp lit on its own, at dusk and at night. The WebGL shader adds the lamps you switch on, so a lamp lights the room the way it was drawn. Oil lamps flicker, the lighthouse beacon flashes and at night the character’s lantern throws a warm pool around him. Every visit starts at night, where the lights show best, and the Time control in the panel switches to dusk. The sea moves a pixel at a time, from pixels already in the drawing.

Dusk Night

The walk #

Making the character walk was the hardest part, every version looked unnatural. This is where I dove into the ScummVM source, to see how the original engine moved a character, one fixed step per frame with separate limbs. It was far more complex than ours, so we tried other ways.

First we measured the drawn frames. The foot on the ground jumped 36 pixels in one frame and barely 6 in the next, and the head bobbed 10 pixels, so the drawings could not be patched. I also found the Curse of Monkey Island sprites, which we studied as a reference only, and none of them ships in the game.

Then Claude proposed to stop drawing frames one by one, and to build a cut-out puppet moved by recorded human walking data. I did not even imagine that scenario, it was absurdly complex for me, but not for the agents, and it surprised me more than anything else in this project. Claude wrote the rig in Python without Codex. It cuts the legs from a standing pose and moves them with textbook gait curves instead of recordings, in 12 frames that each move the foot the same 11.3 pixels.

Later the same rig gained the arm swing, a small bob and the front and back walks, and character-walk.md explains how to do it for a new character.

Sound and voices #

The doors, the books, the lamps, the papers, the cat and the ambience of the harbour and the lighthouse are ElevenLabs Sound Effects. The sea, the wind and the flames are synthesized with Web Audio, follow the room and the time of day, and pan towards what makes them. The footsteps are CC0 recordings by TinyWorlds.

The visitor speaks 49 lines, written by Claude and recorded with Eleven v4 in a voice called Will, which I chose by taste. Claude cannot hear, so I listened to every sound and every voice myself.

The hard part of AI voices is expression. Tags for pauses and emotions ended up on every line and sounded unnatural, so only nine lines keep a hesitation, and v4 follows them far better than the older models. You can listen to the study.

Conclusion #

All of this was a lot of fun. It started with plain images for the covers, then they became animations, then shaders with lamps you can switch on, a Halloween scene, and in the end a game engine. Every step opened the next one, and the creative flow seemed endless.

It is a new way to be in the flow, in the AI era, and I am really liking it.