Stories are often adapted from their original medium to a different one. An example of this is J. R. R. Tolkien's The Lord of the Rings, which began as a trilogy of books before being adapted to films by Peter Jackson. Due to its constant evolution, the web browser has emerged as a new medium for storytelling. This note explores the opportunity the browser offers.

Why adapt a story

Reach a new audience. Some audiences won't engage with some mediums. Presenting a story in a different medium provides access to these people. For instance, when Peter Jackson's Lord of the Rings movies were released, I was a teenager, I didn't have the patience to read Tolkien's books. However, I waited in line for hours to watch each film on opening day.

Same story through different eyes. Different mediums convey information in unique ways and creators interpret the same story through unique perspectives. Tolkien gives relatively little detail of what Middle-earth looks like, leaving much of the work to the reader's imagination. Jackson on the other hand paints vivid pictures. Tolkien emphasizes the length of the journey by detailing every step, making readers feel the weight of the adventure. Jackson focuses on the major events, creating a fast-paced narrative. Neither approach is superior. Each explores Middle-earth from a different angle. Adaptations allow audiences to make a deeper connection with the story, enriching their understanding and appreciation of the original work.

What the browser offers

Each medium has strengths and weaknesses. A book can effectively communicate a character's thoughts while this is difficult in a movie. On the other hand, movies excel at communicating what things look like in ways a book cannot. Let's take a look at the strengths of the browser as a storytelling medium.

Any medium

The browser offers the following communication tools:

• ▪ text
• ▪ image
• ▪ video
• ▪ sound
• ▪ interactivity
• ▪ video game environments (2D and 3D)

Evolve a medium

We can build on traditional mediums. Imagine writing The Hobbit and wanting to communicate a deep sense of longing during the Dwarves' song about their homeland. This emotion is difficult to express through words, but can be effectively evoked through music.

The dark filled all the room, and the fire died down, and the shadows were lost, and still they played on. And suddenly first one and then another began to sing as they played, deep-throated singing of the dwarves in the deep places of their ancient homes; and this is like a fragment of their song, if it can be like their song without their music.

Far over the misty mountains cold
To dungeons deep and caverns old
We must away ere break of day
To find our long forgotten gold.

The pines were roaring on the height
The winds were moaning in the night
The fire was red, it flaming spread
The trees like torches blazed with light.

...

“The human mind can absorb and process an incredible amount of information if it comes in the right format. The right interface.”

Dynamic medium. We don't have to stick to the same medium throughout the story. If a scene would benefit from a different one, we can switch. In Kill Bill: Vol 1, to tell a character's backstory, the film changes from live action to anime. This gives a more stylized and exaggerated portrayal of violence and emotion. Enriching the viewer's understanding of the character by showing them how the character views their own narrative.

Personalize

The browser's localisation feature allows us to personalize stories based on culture. This has been done in the past with the film Seven Samurai. A story about a village of desperate farmers who hire samurai to combat bandits that steal their crop harvest. This story was later remade into the American Western The Magnificent Seven, where the samurai are replaced by gunfighters. Localisation offers an opportunity to explore the same story from different cultural perspectives and allow audiences from different cultures see themselves represented in the universal aspects of stories that transcend any one particular telling.

Interactivity

Interactivity enables more possibilities like letting the user choose where a story goes by giving them control of character(s). It is commonly used in video games and Choose your own adventure books. Interactivity isn't restricted to the user - the browser can interact with real-world information, such as weather or time. Imagine a horror graphic novel where a monster is only visible in the background at night. The medium itself can also interact with the story. For instance, a character entering a cave could change the page to dark mode, adding atmosphere. In 2011, a webcomic used an innovative feature. Midway through the story, the comic takes control of the scrolling and rapidly moves down the page, changing the images into an animated sequence. This, paired with sound effects, delivers a jump scare.

Movie poster adaptation

Using the 2008 Iron Man film poster as an example. We can use scrolling to tell a condensed version of the story (how Tony Stark became Iron Man). Initially we see an image of Tony, as the user scrolls, parts of the Iron Man suit are layered on top until Tony's replaced by the suit. The release date is improved by replacing it with a countdown, building anticipation for release. Additionally, a purchase tickets link is included to provide convenient access to ticket sales.

Lord of the Rings adaptation

A large part of The Lord of the Rings is traveling through a detailed fantasy world, making it ideal to adapt interactively to the browser. I created a prototype that focuses on the Fellowship's journey from Rivendell to the end of Moria.

A map of Middle-earth with a ring icon is shown to help communicate the Fellowship's location. The icon's position updates as the reader progresses through the story. This feature could be extended to mark the location of other groups, like the armies of Isengard and Mordor. Like chess pieces on a board, this would build suspense and anticipation for upcoming conflicts.

Paths. The map shows the path the Fellowship has traveled and intends to take. Reinforcing a sense of progression and getting the reader closer to the minds of the characters by showing what obstacles lie ahead.

Calendar. Paths reinforce the distance traveled while the calendar reinforces the time passed since the start of the journey. Again, this brings the reader closer to the characters' perspective by emphasizing the passage of time.

Character sheets. Clicking on the ring icon opens a simplified Dungeons & Dragons style character sheet for each fellowship member. Including race, lineage, job, equipment, homeland and a button to hear the character's name. Helpful for learning tricky pronunciations.

Lore. The map also provides a way to explore Middle-earth's lore by allowing the reader to pan and click locations to show information about them. Combined with character sheets, this provides an encyclopedia. A way to become more immersed in the world. Currently, the prototype includes two locations, but could be expanded to include item histories, key events and more.

Juice is the non-essential that creates a richer UX (user experience). Some of the juice in the prototype include:

• ▪ Gandalf reciting the Ring poem in Black Speech when hovering the Ring,
• ▪ the page switching to dark mode when the Fellowship enters Moria and
• ▪ sound clips that play during pivotal moments.

UNDER CONSTRUCTION: This section is a work in progress.
Add: Watcher in the Water cinemagraph, Moria door reveal animation.

Helpers

Friends who helped make this note.

• Lochlan Bunn
• Rowena Kok
• Sida Yuan

Feedback

Have any feedback about this note or just want to comment on the state of the economy?