Reviving a Legend: Rebuilding the Donnie Darko Website from 2001

The Tangent Universe collapsed 8223 days, 1 hours, 37 minutes and 29 seconds ago .proceed .

I decided to rebuild a defunct 23 year old website. 2001’s Donniedarko.com.

Behold: donnie.dgw.ltd

It was utter madness. It was utter joy. I don’t know why.

Think this might be the first time I needed to include a Table of Contents on a post.

Table of Contents

  1. But seriously…why?
  2. Ruffle.rs and the Revival of the Game
  3. Resources and Assistance
  4. User Journey and Experience
  5. Missing parts and notes

But seriously…why?

I’ve always loved this website. Remember, this was built in 2001(!) when websites generally looked like this. We were just starting to use CSS and Semantic HTML to produce more interesting websites outside of the contraints of table based layouts and hacks. But truthfully, back then, if you wanted to build a unique experience for users, you would use Flash. Flash is obviously now very dead, after many security issues and Steve Jobs declaring it would never be allowed onto the iPhone in 2007.

At the time, this site was just so impressive and entered internet legend. Built by the agency Hi-ReS! and launched in October 2001, it totally eschewed the general approach to building websites. It was sprawling, narrative-driven, immersive and brilliant. There wasn’t really any formal navigation; you progressed through the site through exploration. It just felt so novel. And it really isn’t something we’ve seen since. User experience design, accessibility, formal ‘design’ methodologies, design thinking, development convention, and the sheer weight of user expectation have led (in many ways rightly) to something like this becoming impossible to imagine being built today. The original creator is an award winning Fine Artist & Creative Consultant), and I feel we don’t have enough of these sort of creatives in modern web development anymore, but that’s for another post.

Being a Flash site, it was semi-playable until recently via various archived versions of the site. The orignal agency that built it dissolved and their own archive (archive.hi-res.net) eventually disappeared from the web, the Internet Archive was the only place this site could be conceivable accessed. However with Flash becoming obsolete, it was not possible to access this piece of internet history. I always dreamed of maybe rebuilding (restoring?) it, either by reverse engineering it or attempting to try something in vanilla HTML/JS/CSS, which would have been a huge undertaking and probably nothing compared to the artistry of the original.

Step up Ruffle.rs, a Flash Player emulator built in the Rust programming language. Well, well, well. Maybe game on?

The Internet Archive has Ruffle.js enabled which is awesome, so in theory the game would be totally playable, but not all the pages were archived in the same snapshot and also not all the sections were totally archived….so game off. Or was it?

And thus the epic journey begins…


Ruffle.rs and the Revival of the Game

Playability Through the Internet Archive

  • Internet Archive: The game was playable again thanks to its availability on the Internet Archive having archived it in the first place and now Ruffle.rs.
  • Archival Inconsistencies: Unfortunately, the game often got stuck after the initial menu or just after the first section, where the next step didn’t existing within the same snapshot. This varied depending on the site version or the specific archive capture accessed.
  • Dispersed Archives: Many game pages were archived, but they were scattered across different parts of the archive, requiring direct access to certain pages to progress through the game. Meaning the game was effectively split across time periods, which was rather apt considering the subject matter and the site architecture.

Digital Archaeology

  • Archived List of Pages and Files: A pretty comprehensive list of all the pages and files that were archived can be found here and some from the original site.
  • Guide to the Site: An archived guide to the site was invaluable to piece together the various part of the game.
  • Creator’s Showcase: Alexandra Jugovic, the site’s creator, showcases the original site and much user journey on her website reel again invaluable in trying to solve this puzzle.
  • Building a Sitemap: Utilizing these resources, along with 404 errors indicated in the console and network tab, helped in constructing a sitemap of the original site.
  • Reddit Insights: Reddit discussions provided valuable insights and interpretations of the site’s text, contributing significantly to the reconstruction process.

Reconstruction and Archival Layers

  • Multi-Layered Archive: The current version is an archive of an archive of an archive, originating from donniedarko.com and later archive.hi-res.net.
  • Lost Elements: Unfortunately, some parts, particularly a few SWF files that I think might have been streamed in the original site and as such were not archived and so seemingly lost forever. These include files from Level 2 (street.swf, love.swf, fear.swf) and Level 3 (lamp.swf, phone.swf). These were the bits I had to reconstruct. It took some time.

Resources and Assistance

Now, given the missing parts I needed to basically reconstruct Flash scenes in HTML, CSS, JS 😅😅😅. I’ve been using GitHub CoPilot for about a year now, and honestly there were some parts of this I could not have achieved without it. So using a combination of Ruffle.rs, 11ty, Alpine.js, 98.css, SVG noise filters, Tailwind (I know), AI, Photoshop, Lossless Cut and trusty ‘ol HTML, CSS, and JavaScript I hunkered down and started work.

Additional weird things were required like recording audio out of my laptop speaker from parts of the original Flash files to reuse in the reconstruction effort. Hand-copying text from screen-grabs into HTML and so on. It was utterly mad, but enjoyable.


User Journey

This is bonkers and amazing. Kudos to the original developers, to use redirects and the url structure as part of the game is just very cool. They even apparently set up loads of satellite sites to enhance the online experience (I think sadly lost). Just awesome.

I also rebuilt the archived guide to the game as well, to help my own development as well as a guide to anyone that might get stuck in the game.

Here I’ve attempted to write up the user journey, behold.

Intro

  1. Intro:
    • Opens intro.html, which loads several swfs: intro.swf, clouds.swf, book.swf, and menu.swf
    • Option to skip to Level 1, else continue to full intro

Level 1

  1. Main Menu
  • Menu is displayed (loads menu.swf).
  • User clicks on Level 1 is active
  1. News article pop-up:

    • Pop-up is displayed – news/pop1.html, which in turn loads news/newspaper4.htm (loads top.swf & side.swf).
    • The section is closed the next part of the game is loaded.
  2. News article pop-up:

    • Pop-up is displayed – news/pop2.html, which in turn loads news/newspaper3.htm (loads top.swf & side.swf).
    • Similar to the previous step, once closed the next part of the game is loaded.
  3. The Tangent Universe Is Unstable (Part 1):

    • Opens the/tangent/index.html, which loads smurf.swf.
  4. The Tangent Universe Is Unstable (Part 2):

    • Opensthe/tangent/universe/is_unstable.html, which loads philosophy.swf`.
    • A series of SWFs are loaded in this order: dad.swf, donnie.swf, straight.swf, gran-donnie.swf.
    • Followed by thebook.swf.

Level 2

  1. Main Menu:

    • User opens menu.html, loading menu.swf, clouds.swf, and book.swf.
    • User clicks on Level 2 is active
  2. Level 2 Pop-up:

    • Pop-up is displayed pop/pop_level2.html, which loads pass2.swf.
  3. Loads Level 2:

    • Loads pop/close.html.
  4. Are you sleep golfing?:

    • Redirects to are/you/sleep/golfing/index.html.
    • This page loads multiple SWFs: golf.swf, birds.swf, draw.swf.
  5. News article pop-up:

    • The user goes to news/pop3.html and then to news/newspaper2.htm.
  6. Missing Section:

    • The SWF files street.swf, love.swf and fear.swf fails to load when this happens we listen for that network event and load up are/you/sleep/golfing/missing/intro.html
    • The reconstructed game progresses from are/you/sleep/golfing/missing/1.html to are/you/sleep/golfing/missing/7.html.
    • The journey includes a pop-up to news/newspaper5.htm.
  7. Sparkle Motion:

    • Game progresses to sparkle/motion/index.html, which loads phase2_end.swf.

Level 3

  1. Main Menu:

    • User opens menu.html again, loading the same set of SWFs as before.
    • User clicks on Level 3 is active
  2. Level 3 Pop-up:

    • Pop-up is displayed pop/pop_level3.html, loading pass3.swf.
  3. Loads Level 3:

    • Visits pop/close.html.
  4. From the sky:

    • Redirects to from/the/sky/index.html, which loads trampolin.swf.
  5. Pop-up warning:

    • Pop-up is displayed news/pop6.html.
    • When dismissed a new one displays news/newspaper6.htm.
  6. Final Missing Section:

    • The SWF files lamp.swf and phone.swf fail to load, once phone.swf fails we redirect to reconstructed page from/the/sky/document.html
    • End of the game

Missing parts and notes

Desktop Recommended for Optimal Experience

  • Keyboard Input: This application is best experienced on a desktop due to its reliance on keyboard input. Although I have tried to implement a mobile keyboard for this some parts require direct keyboard access, although the flash files can’t seem to detect these.
  • Known issues:
  • Occasionally, new tabs may not function properly and the game can’t be progressed. If this occurs, it’s recommended to return to the main menu and restart the process. Or make sure only one tab is open. Or copy the current url in to a new window and try again.
  • Also you know this is Flash, In 2024. So there’s that.

Content Reconstruction Updates:

  • Missing Sections: Some sections have been reconstructed in HTML/CSS/JavaScript to replace missing SWF files. The application now redirects to alternative content when attempting to access these files.
  • For instance, when /are/you/sleep/golfing/love.swf is requested, it will now redirect to /are/you/sleep/golfing/missing/intro.html.

Specific Level Updates:

  • Level 2 – Missing section:
  • Problem: The original SWF files for this section were not retrievable.
  • Solution: A reconstructed version has been implemented.
  • Navigation: Upon completing this segment, the game should automatically progress to the new content. If it does not click here to continue.
  • Level 3 – Missing section:
  • Problem: The original SWF files for this section were also unavailable.
  • Solution: This segment has been similarly rebuilt.
  • Navigation: After finishing this part of the game click here to proceed.

Announcing the Super Sunday Sutton Service

A few years ago was on a Train into Surrey and this amazing train driver was doing the announcements. And well they were just superb. Read or listen – your choice, but please enjoy.

Train line showing all the stops these audio tracks cover

Bal-ham

Bal-ham, the gateway to the south. Please change in Bal-ham if you require the tube or stations via Crystal Palace or stations down via Norbury. If you are leaving the train, please do so from the right-hand side as the platform is on the right-hand side here at Bal-ham, the gateway to the south.

Mitcham Eastfields

Okay, ladies and gentlemen, shortly be arriving into magical Mitcham Eastfields, not to be compared with Westfield, which is a shopping centre. This is a train station, a very popular train station. If you are leaving the train here, don’t forget to take yourself with you when you leave the train. Eastfields, of Mitcham.


Mitcham Junction

Okay, ladies and gentlemen, the next station stop is the rather magnificent Mitcham Junction, with the junction that’s not here anymore. Please change here at Mitcham Junction if you require those half bus, half train things called trams that go to all local places like Wimbledon and Western Croydon. If you are leaving the train here, please note you need to be in the front seven coaches otherwise, you are not going to be able to get out of the train, you are just going to be looking at a brick wall or some grass. Please do make sure you are in the correct part of the train, the front seven coaches only here at Mitcham Junction. Why not leave the train here and play golf? It’s a marvellous hobby.


Hackbridge

Okay. Ladies and gentlemen, boys and girls, next station stop is for the heroes of Hackbridge. If you’re leaving the train here, once again, you need to be in the front seven coaches only. Otherwise, again, you’re not going to be able to get off the train. Just grass if you look out here and a road cone. If you are leaving the train here, please do mind the incredibly huge gap and step down from the train to the platform, especially if you are right at the front of the train. It’s big. Do not break your ankles. Watch your footings here at Hackbridge, front seven coaches only.


Carshalton

Okay, ladies and gentlemen, the next station stop is the more caring side of Carshalton, the one without the beaches. If you’re leaving the train here, make sure you have a jolly good afternoon.


Sutton

Okay. Ladies and gents, boys and girls, we will shortly be arriving into Sutton, with two T’s and an O, a Shopper’s Paradise. Change here at Sutton, with two T’s and an O, cross to Platform 4 if you want to go around towards Wallington, West Croydon, Norbury, and Crystal Palace. Remain on Platform 2 if you want to go around to the other side of Sutton for stations towards St. Helier and Wimbledon. If you are leaving the train here, please make sure you have everything with you, mind the gap, and the step down from the train to the platform. This is your super Sunday Sutton service to Deep East, Dorking.


Cheam

If you’ve done rather well and you’re living the dream, you probably live here. It’s charming, Cheam.


Ewell

All right, ladies and gentlemen, boys and girls, the next station on today’s service is the more executive side of Ewell, the Ewell in the East.

If you are leaving the train here, please make sure you are in the front eight coaches of the train, otherwise, you are going to be looking precariously over the road bridge down at the cars below. Scary stuff. Please make sure you are in the front eight coaches only, if you wish to alight here at Ewell East.

Keys to the Ferrari on standby.


Epsom

Boys and girls, mums and dads, friends, relatives, aunts and uncles, the next station on today’s service is exciting Epsom. If you are leaving the train here and you’re right at the very back, please do mind the gap and the step between the train and the platform. Please change here, cross the platform at number four, if you want to go around towards Worcester Park and Wimbledon. If you’re like myself, you are leaving the train here, please do make sure you have everything with you, and do have jolly good afternoon. Somebody else is going to drive you on now, down to deepest Dorking on your Super Sunday Sutton Service. This is exciting Epsom.

20 years!

…since this blog was created.

I feel both quite happy and somewhat old about that. I’ve probably not always given it the attention it deserves, but it has been a nice constant throughout the last two decades—a place to call home.

I’ve likely done more redesigns than blog posts, but that’s one of the great things about having your own space: you can experiment with things, try new ideas out without having to answer to anyone but yourself. It’s really helped my professional development, being able to experiment.

This site started back in 2004 on WordPress version 1.0.1, and back then, it really was just blogging software. WordPress also recently celebrated its 20th birthday and has evolved significantly since then. Over the years, I have increasingly used WordPress in my professional career to build larger and larger sites, to the point where it is now the basis of my own business – Dogwonder Ltd.

In a rather self-aggrandising way, this blog started with a quote from a French philosopher (we do tend to think highly of ourselves in our 20s). So I figured I might as well include one here.

“The futility of everything that comes to us from the media is the inescapable consequence of the absolute inability of that particular stage to remain silent. Music, commercial breaks, news flashes, adverts, news broadcasts, movies, presenters—there is no alternative but to fill the screen; otherwise there would be an irremediable void. We are back in the Byzantine situation, where idolatry calls on a plethora of images to conceal from itself the fact that God no longer exists. That’s why the slightest technical hitch, the slightest slip on the part of a presenter becomes so exciting, for it reveals the depth of the emptiness squinting out at us through this little window.”

Jean Baudrillard

And some old designs of this blog going back through the years

Do you believe in time travel?

The Tangent Universe collapsed 8223 days, 1 hours, 37 minutes and 29 seconds ago .proceed .
2024 2023 2022 2021 2020 2019 2017 2016 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004