How I Built an Interactive Storytelling Site in Two Weeks

Re:write, You Are the Main Character of This Game Called Life!

Life is like a video game, and you have been holding the controller all along

That is the idea Re:write hopes to leave you with. In this post I will break down how, with help from AI, I built and shipped this project in just two weeks. If you have not experienced Re:write yet, feel free to go play it first!

Where the Idea Came From

It all started with an Instagram reel about how life is just like a game. Everyone has control, but most people do not realize the controller is already in their hands. That reel really resonated with me. I had been wanting to build a storytelling website with three.js for a long time, so I decided it was finally time to do it!

Structure and Ideation

I started by drawing wireframes to think through where the sentences should break, what counts as a scene, where the story needs a turning point, and which moments should be highlights.

But even with the wireframes done and a rough direction in my head, I still was not sure how much of it I could actually pull off. So I decided to build a spike first. That means using placeholders for everything, just to work out what layers there would be, how the text would appear, how the character would move, and how the transition effects would play out.

The visual I wanted was an interactive 2.5D scene. Moving the mouse creates parallax, the character moves as you scroll, and text shows up along with the character and the background. The main goal at this stage was to confirm that the picture in my head was technically possible.

Even though the spike proved the tech could work, the transitions between scenes mattered just as much. So I also built a small transition lab, applying post-processing effects to see how they would actually feel on screen.

Building It for Real

Once the spike and the transition experiments wrapped up, I did one more round of prep before mass-producing content. I wrote the data model down as a spec, so adding a scene later would just mean filling in a table instead of rewriting the architecture every time. I also defined one axis for the whole site: the entire storyline is a single progress value from 0 to 1, and every scene, every line of text, and every animation hangs off that number. On top of that, I made sure scroll updates would not trigger React re-renders, so performance would not fall apart.

With the prep done, it was time to face the assets. This was the part I felt least confident about. I wanted a hand-drawn style, but I was worried my drawing skills were not good enough to make it look right. After designing the little ghost main character and locking in the style, I half gave up, thinking that producing all the assets by hand would take forever. Then I discovered that Claude Fable could actually write a program to generate the images!

The Key to Shipping in Two Weeks: My Assets Are Code

Fable first wrote itself a set of hand-drawn brushes, then wrote a function for each scene that combines those brushes. So my assets are not image files, they are code, and changing a picture does not mean redrawing it!

For example, if I want to change the main character, I just give it a prompt like: add little hands to the ghost. It tweaks a few lines of code, reruns the script, and out comes the new image. That is the key to iteration speed. If every asset had to be drawn one by one, there is no way this could have been finished so fast.

Also, Fable had just come out at the time and was supposedly only available for a few days, so one day I pushed 54 commits and generated all the main assets in a single day. Only after finishing did I find out Fable had reset, so I could have taken my time after all...

Wrapping Up

Even though the main assets were done in a day, the finishing work still went on for about another week. The most demanding part was mobile. The mouse wheel experience is a completely different story on a touch screen, so after some thought I rebuilt it with gesture buttons and a progress UI. I also had to deal with autoplay restrictions in mobile browsers, so that once you turn on the audio, the sound effects still play even in silent mode.

Finally, I added reduced-motion support. If someone has reduce motion turned on in their system settings, the background animation switches off automatically when they visit. And with that, the project was pretty much done.

My Workflow

The flow of this project is as follows:

1. Ask what problem we are solving first (concept comes before picking effects).
2. Know whether the tech will hold up before committing, by running a spike first.
3. Write the architecture down as a spec, so the content after it can be mass-produced and changed.
4. The performance, accessibility, and browser quirks are all part of the deliverable before ending the project.

AI changed the speed of execution, but the concept, the story, the art direction, and the thousands of does-this-feel-right decisions still need a human. What is scarce now is not the ability to build things. It is knowing what is worth building, and being able to tell whether it turned out right.

Final Thoughts

Fable gave me the chance to take a concept-driven project and land it fast, and being alive at this technological singularity is genuinely fun. But what really made this project work was the decision to turn assets into code, plus all those wireframes and spikes earlier that looked slow at the time.

I hope this post gives you a little inspiration!

If you are thinking about building an interactive storytelling site or a brand experience on the web, feel free to reach out and chat with me~