Hi there! I’m olie, the author of Digital Penthouse. This post is a little explanation of what inspired the project and how I actually created it!
I highly advise checking out the story before continuing, firstly because this won’t make much sense without the context, and secondly because I think it’s best experienced blind and knowing what to expect takes out a lot of the fun.
Just a heads up – I don’t plan to ever talk in detail about things that occur in-universe (so: story beats, events, or themes). Everything I wanted to convey is right there in the story! This talkback just exists to show how I created the project, divided into two sections: Writing and Presentation.
I’ve also included a Resources section at the bottom of the page in case you're only interested in those.
Without further ado: let’s begin!
This section is about the project’s initial creation, and how I turned it into an outline.
Inspiration
The largest reason this story exists at all is because of its main inspiration – a project called Petscop. It’s a Youtube channel following a guy named Paul who uploads and explores a cryptic game he found on the Playstation 1, and the whole thing is coated in a deep layer of fog – which only gets foggier and foggier as the series progresses until you’re not even sure what you’re watching anymore. It’s a fantastic series and I really cannot recommend it enough, especially if you’re a fan of unfiction in general.
It’s hard for me to say whether the themes and ideas explored within Petscop have always been interesting to me, or whether I only became interested in them upon countless rewatches, gaining appreciation for them over time. It’s a chicken or egg situation! Whatever the case, Petscop is an absolute joy to me, always eliciting a “red string and corkboard”-type reaction, and for a while I’d wanted to create something of my own that could do the same for other people.
I tried my hand at making Petscop-likes a few times in the past, but nothing ever felt “real” to me. It was all a bit surface-level. For instance, the idea to create a fake game of my own called “Hazel Hotel” – a life-sim where the main character Hazel had been left idle for fifteen years – took on a variety of mediums (first a Baba levelpack, then a fake article, and then a fake blog) but I constantly felt like I was only a few sentences away from running out of narrative train tracks.
Recycling
It turns out that Petscop draws a lot of inspiration from the creator’s past projects, with Petscop almost acting as a culmination of everything that came before it. This is apparently quite a common thing with artists – to retread the same ground multiple times, tackling the same themes or stories again and again, with a greater understanding each time. I get the mental image of a woven tapestry; some threads have grown strong and thick with age, and their strength allows them to support newer, thinner threads. An artist can reuse whatever old threads they want to create whatever tapestry they want to weave.
Maybe a better metaphor is: writing a story completely from scratch is like trying to build a set of miniatures on an empty table. You have to spend time carving wooden blocks into characters, locations, and plot points to fill the table up. But if you start with a handful of blocks pre-carved, it allows you to fill up the table a lot quicker, and your previous experience with them means you can more effectively utilise them!
With this in mind, I decided to try my hand at writing a short story – recycling an idea I had for a sequence of Baba Is You levelpacks, which itself contained characters from a universe me and my best friend created. The general idea of the story was that a girl’s best friend goes missing and she wants to hunt down why. It’s called IMAGINANNIE and you can read it here.
And I like it a lot! It has the perfect amount of mystery and loose ends while still offering explanations for those with a keen enough eye. I was really proud of it, and yet I was hungry for a bigger project. Something with more mysteries and oddities and connections; a body of water so deep you couldn’t even begin to imagine the bottom.
A Brief Tangent Related To Planning
Okay, sorry for the interjection. But I just finished the outline of this and remembered there’s a second reason why IMAGINANNIE worked so well when my other stuff didn’t. Shocker – it’s all to do with planning!
See, I was under the impression that, because every writing project I’d worked on up until that point had been “pantsed” (meaning: the very first chapters were also my first foray into that universe, and I was just making things up as I went along), I was a panster! This was just how I rolled. Completely unrelatedly, about 90% of my projects fell through right at the beginning, and I had abandoned THREE large-scale projects that were 50% complete but I had no idea how to move the story to a place that felt right. Plus I was constantly rewriting old scenes which gets old fast.
The idea of planning something ahead of time always seemed really scary; for some reason I tricked myself into believing that it would make me a “plotter” and I’d have to meticulously plot every single thing that would happen front-to-back and I could never deviate from it. Which I've since realised is bullshit! Never underestimate the power of bullet points, especially concerning the big “showstopping” moments. Having an idea of what those look like makes the process of actually writing so much easier.
God, I love bullet points. I would marry bullet points if I could. I did a lot of bullet points with Digital Penthouse but, ah, I’m getting ahead of myself. We haven’t even talked about the catalyst for why the story exists yet!
Page URLs
The Hazel Hotel project I mentioned earlier developed into a fun little universe filled with lots of colourful character designs (they don’t exist in a story yet, but hey-ho, maybe one day). After drawing them for around six months I was ready to showcase their designs on my website, just as a side project. Each character would have their own page.
Now, Neocities doesn’t have a way to make pages private – it’s all public. If you’ve saved the file, the page is accessible to anyone who knows the URL. To prevent people from brute-forcing their way into pages while they were still being worked on, I made sure the URLs were harder to guess, containing other extraneous details. I.e. the 5th character from Generation 1, called “Stitches”, would have the unique URL “hazel-hotel/1.5-stitches”.
But this did make me think. Hypothetically, if you knew the format the URLs used, all you needed was a screenshot of the hub page (which contained each character’s name, generation, and position) and you’d be able to access any of the character pages by typing in their URL, regardless of whether they were finished. You didn’t need to interact with a hyperlink, ever.
You might see where I’m going with this. This was the “spark” for Digital Penthouse – all I needed was a story to tell!
Foundations
The Digital Penthouse story was built, pun not intended, a bit like a house. I started from the ground up, with a few bricks (ideas) and a hell of a lot of mortar (motivation). But if I wanted a proper house, I was going to need more bricks. And knowing how well recycling had worked for my last story, I knew exactly where I could find them.
A very large majority of the cast (Mel, Sid, Penny, Harry, Sketch, Reaf, Andrew, and One) come from a very old and very bad story I wrote a long, long time ago and never finished. It involved a virus that controlled people’s minds using microscopic chips in their brain, forcing the main characters to band together and save the world. My only experience with online stories at the time were Object Shows, Homestuck, and Worm, and if you’re familiar with any of their fandom content you’ll understand that the writing quality was, uh. Well. It wasn’t very good.
When moving the characters to Digital Penthouse, I changed all of their names, personalities, and added some new relationships in order to make them feel more fleshed out. As an example: Mel and Sid didn’t even know each other in the original story, and were definitely not twins!
I knew I wanted the plot to revolve around the characters finding an odd piece of media, possibly containing details that allowed them to piece together a larger mystery connected to their real lives. (I had a more specific idea in mind, but some of it borders on spoilery territory, sorry.) This idea became the stageplay Mel finds in her schoolbag.
Outline Time
At this point I had reached a brick wall. I had my characters, I had the semblance of an interesting plot hook, but the finer details weren’t all there yet.
So I wrote a draft for the first chapter!
Yeah, yeah, I hear what you’re saying, “But you said to plan things out before you start writing!” And that’s true... to an extent. However, writing a tiny tiny fraction of the beginning of the story, to get a feel for the style, to get a grip on the characters, and to test out the plot hook? It allowed me to actually “see” the story – which greatly helped in visualising where it might go next!
And, after writing out that draft, I had a TON of cool new ideas that wouldn’t have otherwise existed, so I put my writing pen away and excitedly got to work on creating a stack of bullet points that covered all the key story beats. I basically followed whatever felt right for the characters to do in particular moments, making sure to variate locations, character combinations, and subjects. It was tricky at times, and the finished outline was as barebones as bones could get, but I was really pleased with the result.
And Then The Rest Of The Writing Happened
The process of turning the outline into a fully realised story was super fun! Unfortunately it’s also the part I promised I’d publicly share the least about. The story has an interpretive nature to it, which means I’ve sworn off talking about what my intentions were – and explaining this part of the writing process without entering that territory would be super tricky! I don’t think anyone wants to read about me vaguely gesturing to things you’re not allowed to see, so I’m just going to end this section here. Sorry!
This section is about how I created the website and the art.
Creating the Website
Neocities was my first choice for hosting. I did a bit of research into other places, but they all seemed a bit complicated – and besides, Neocities was free, and I was already familiar with it, so why not? My only issue was that having Neocities in the URL might mess with immersion, but it was a very minor trade-off.
I had already learnt the basics of HTML and CSS using the W3Schools tutorials when I made my own website, so creating the skeleton of a website was pretty painless. I divided the styles into article pages, which were modelled after an old Wikipedia article I found using the Wayback Machine, and chapter pages, which were modelled after my memory of random books I’d borrowed from my old school library.
But after plugging in Mel’s character page as an example to test how the website felt to use, it felt a bit... boring. In my head, the first "hook" that got the reader excited would be how none of the hyperlinks worked – but that wasn’t immediately obvious! I was a bit scared people would get confused, and either assume it was a real website that didn’t work, or assume there were working links secretly mixed in with the broken ones.
My solution was, as you probably know, to introduce the visual element of hyperlinks dropping to the bottom of the page when clicked.
I Freaking Hate JavaScript Dude
Why is every fun, unique website feature locked behind JavaScript? Everyone hates JavaScript. I would never marry JavaScript.
I had never used JavaScript before having this idea, though, and it was quickly becoming obvious that it was the only option to make what I wanted. I envisioned clicking a hyperlink would cause it to drop and become a physics objects like that one Google page. The library Matter.js seemed perfect for that purpose! All I had to do was learn a little bit of JavaScript. How painful could it be?
I was not prepared.
Okay, I’m probably exaggerating a little. The W3Schools JS tutorial was definitely a step up from learning HTML, but I still understood most of it. I finished what I thought were the “essential” parts and then dived headfirst into Matter.js. This was where it got super, duper, unbelievably difficult, because it turned out there was a lot more to JavaScript than just declaring functions and creating if/else statements!
I’ll spare you the gory details. I did find this YouTube video especially helpful in figuring out how to even set up Matter.js, and StackOverflow was a lifeline when it came to troubleshooting the myriad of problems one might face. Screw the Matter.js docs. I’m not marrying those either.
Eventually, I got something that worked, and it only took around three weeks of bashing my head into a wall and screaming! It’s kind of incredible that I was able to make something like this given how I loathe text-based programming. I felt very motivated by the idea of the end product, I guess!
The Drawing Part
From the very start, I knew I wanted the chapter pages to start with a big calligraphy title, which I’d achieve by drawing it out in my sketchbook and scanning it. But after realising that the homepage was missing something immediately captivating, I decided the website needed a big flashy logo. I could draw that too!
The way I drew the logo was by using graph paper to sketch out the same outline three separate times, and then variating the linework a little so that when played in sequence they’d have a wobble effect. I was inspired by Baba Is You to do this, but a lot of people have pointed out its similarity to Omori.
The doodle concepts on the left page illustrate my “iterative” process a lot better than I could ever describe. It’s neat to look back on my original concept and what I changed about it.
Keep scrolling to see the rest of the scans, which I think are pretty cool to look back on. You’ll notice that my earliest idea for the chapter numbers were very bland, so I scrapped those and gave them more personality. I’ve also included the scans for the promo image and soundtrack, because they have similar iterative processes!
Then all I did was manually erase the white backgrounds using an app on my phone called ibisPaint, before sending them to myself and implementing them on the website.
Creating the art was probably my favourite part of the process, although that might be because it was the easiest for me. Especially in comparison to the nightmares of JavaScript past.