Entertainment

How The Matrix Resurrections Is Using JavaScript And Nuxt To Generate Dynamic Teaser Trailers At Run Time

The Matrix Resurrections has taken the internet by storm and for good reason. Warner Bros. announced today that the first full trailer for The Matrix 4 will drop online this Thursday. In the process, the studio left some morsels for fans to chew on in the form of teaser trailers. The absolutely insane part came when fans realized that no two teasers are the same.

The official Matrix website invites fans to choose between wanting a Red Pill or a Blue Pill. Every time they click, fans are treated to a custom teaser, with new shots and footage and Yahya-Abdul Mateen II mentioning the time in his voice as the exact time when fans clicked on the trailer. This means you can potentially hear 60 x 24 or 1,440 variations of Mateen’s voice-overs. Online sources are pegging that about 180,000 variations of the trailer exists.

Naturally, the question on a curious fan’s mind is: how on earth did Warner Bros. pull this off. Well, I did some digging and while I don’t have precise answers, I’m hoping to spark enough curiosity for someone to take the push further.

To understand what’s going on behind the scenes, you need to start by looking at the source code. There’s some interesting information available in there. For starters, there’s a payload.js file that reveals subtitles of all the dialogue spoken in all variations of the trailer. Here are the lines:

This is the moment
For you to show us what is real.
Right now, you believe\nit’s \u003Ctime\u003E
But that couldn’t be further\nfrom the truth
Could be this is the first day\nof the rest of your life
But if you want it
You gotta fight for it
Do you remember\nhow you got here?
You’ve lost your capacity to\ndiscern reality from fiction
What’s real is here and now.\n\u003Ctime\u003E
Anything else is just your mind\nplaying tricks on you
It becomes a problem\nwhen fantasies endanger us
We don’t want anyone\nto get hurt, do we?

The “\n” is an escape character used to denote a new line. Furthermore, there are variables \u003C and \u003E that are used to fill in for the time at which the trailer is downloaded. This file also reveals the movie’s Twitter handle as TheMatrixMovie, although that’s something that you can figure out without needing to dig in here.

The file also contains some taglines that further hint at the captions you can expect to see once the trailer goes live, as well as the fact that it will be inevitably available on the site to watch. You can view the complete JS file here.

THE FIRST FULL TRAILER IS COMING SOON.
THE FIRST FULL TRAILER IS ONLINE TOMORROW.
THE FIRST FULL TRAILER IS AVAILABLE NOW.
SEE WHAT’S REAL.

The trailer itself is generated using some pre-created snippets. The intro, outro and a few variations have been preloaded; the variations include clips that say “See the full trailer in 2 days”, “See the full trailer tomorrow” and “See the full trailer now”. That last one will go live once the trailer has launched.

Every trailer generated is hosted on a URL that goes like this:

https://thechoiceisyours.whatisthematrix.com/generated/v7/high/<randomstring>.mp4

Here, <randomstring> is a string of characters comprising of the alphabets a to f and 0 to 9 (at least that’s what I saw in my copies). Using this URL, you can download the trailers your click generated in high resolution.

But how do you get these URLs? Simple. Before clicking on the Red or Blue Pill, open Chrome Developer Console (three dotted menu -> Developer Tools or press Ctrl + Shift + I) and navigate to the Network tab. Make sure you have the Network tab open before you click on the Red or Blue Pill. Once you click on either of the pills, the Network tab will start populating with the snippets of videos used to generate your trailer, along with the final trailer itself.

Look for a file that’s around 12 to 13 MB in size, right click on it and select Open in New Tab. This should begin your trailer download. You can now watch it in glorious 1080p; no more screen recording.

I tried hard to examine the JavaScript code that generates the random string of characters but it’s over 45,000 lines of code. The site appears to be running on a modern JavaScript framework called Nuxt; there are several references to it in some of the URLs as well. The main files seem to be app.js, manifest.js and content.js that together, run a series of function calls that takes the intro, outro, the time at which you clicked converted into a unix timestamp and a slew of regular expressions to return a generated video and its URL. Once generated, the video continues to reside in the website’s directories.

Update: Some more details were uncovered by Reddit user u/morpheus_017 on how the calculations are being done. Here’s an attempt at simplifying them:

Once you click on either pill, a string is generated with 6 parameters in the following format:

17{red|blue}-a-b{1-3}-c{00-23}{00-59}-d-e{1-3}-f-g{1-3}-h{1-3}-i

Here,

  • red|blue is your selection of either the red or the blue pill respectively
  • 1-3 is a random selection among a set of three clips
  • {00-23}{00-59} is the timestamp. Of the dual parameters, the first is for the hour (between 00 and 24) and the second is for the minute (between 00 to 59)

Let’s assume that you clicked on the blue pill at 11:25 PM. Your string could look something like this:

17blue-a-b2-c2325-d-e1-f-g3-h1-i

This is then used to generate an MD5 hash. The MD5 hash for this string would be:

419f1f7d3a62a443d397ea56c876ac1f

This is the title of the video. In the URL I mentioned above, this is the random string. Your video URL would thus look like: https://thechoiceisyours.whatisthematrix.com/generated/v7/high/419f1f7d3a62a443d397ea56c876ac1f.mp4

Go ahead, click on the link above. You should be able to download a trailer.

The fact that the clips can be randomly selected is what makes each teaser unique. Already, it’s looking like the blue pill footage is somewhat different than the red pill one.

In the given set of videos, there exist: 2 values (red | blue) x 24 hours x 60 minutes x 4 sets of clip selections x 3 clips to choose from. This gives us 33,750 values. Assuming that the 3 sets of clips are all different, we could get 33,750 x 3 x 3 x 3 i.e. 911,250 or roughly 1 million variations. This sort of helps assert my suspicion that the trailer file is most likely being generated at runtime as pre-rendered files would mean the production would have to store 11 TB worth of files beforehand. It also doesn’t make sense then to write such a complicated 50,000 line of JavaScript code.

The original story continues

You can download the Red Pill and the Blue Pill trailers that I generated by clicking on the links. Meanwhile, I’ll keep digging to find any clues before the trailer hits the web. In case any of you folks out there find something crucial, don’t hesitate to link bank or drop a note in the comments below.

Finally, a few interesting tidbits about the code that may be entirely coincidental.

The <randomstring> above is 33 characters. 33 is widely regarded as the age at which Jesus died on the cross for his sins. If unintentional, it could be a nice nod to the themes of reburth and “resurrection” in this version of The Matrix.

Lastly, the URL hosting the trailers has v7 in it. Eagle-eyed fans from The Matrix would know that Keanu Reeves’ Neo was the 7th “One” and the movies were set in what was essentially the 7th version of the Matrix. Coincidence? I think not.

Anyway what were some of your interesting finds from the trailer? Let me know in the comments below.

The Matrix Resurrections hits theaters on December 17, 2021.