Recreating the Portal Credits in the Web

I adore Portal's ending credits, the music and visuals are iconic. For this project, I wanted to recreate them in the web with HTML/CSS/JS.

While I could've used an off-the-shelf typing animation library, I wanted the challenge of creating the animations from scratch. Everything here is vanilla js.

This was done in 2018, a time before ai. So, I was there on youtube watching someone's game footage of the credits, copying down all of the lyrics (including every single name that scrolls on the right). I then made a makeshift tool to manually sync up each line of lyrics with the real credits.

At some point around 2020-ish, browsers started enforcing autoplay policies. The audio wouldn't play until you interact with the page. So, I later had to add a "play" button before the credits would start.

This was fun project, a lot of manual work. In 2024, I'd probably over-engineer an ai script to avoid all that. But, a satisfying result I think.

Naturally, I want it to be MORE REALISTIC, so maybe when I'm next learning WebGPU, I'll revisit this project.

Experience them here

• Portal 1 Ending demo | Source code
• Portal 2 Ending demo | Source code

Huge thanks to @kazitor for the ASCII art used in the Portal 1 Credits.