Starcaster is an interactive story frame built on Farcaster, created with some simple tools and no coding expertise. In this story I will share how we created Starcaster, but also show you how to begin creating your own immersive stories on Warpcast.

The idea for Starcaster emerged when a colleague and I decided to step out of our usual professional routines. We both work as consultants in the UX field—myself in the automotive industry and my colleague in job searching. We wanted to challenge ourselves with something fun and different while still leveraging our skills as designers.

I had joined Farcaster a few months earlier and found the Frame experiences there fascinating. It provided us with new challenges and opportunities that we, as designers, are always eager to explore—something fresh, something exciting.

But what were we going to do? We couldn’t code and had little experience with this new platform. So, I started exploring our options. That led me to create a simple frame called The Beer Frame using a tool called Neynar Studio.

This became our breakthrough moment! 

What if we could create an interactive story, similar to D&D or the classic choose-your-own-adventure books? No coding required—just a story and a few branching pathways.

It sounded simpler than it actually was.

Creating the Story 

This is where your own adventure begins.

Building a story can be as simple or as complex as you want it to be. We started with a few basic ideas: it was set in space, you're trying to escape, and—you die a lot.

To kick things off, we used ChatGPT to generate some simple branching paths as a starting point. However, we quickly ran into an issue—it struggled to create pathways that looped and intertwined. Instead, it kept producing 3 or 4 paths that all ended after just a couple of choices. That wasn’t exactly the engaging experience we were aiming for...

We realized we had to build it ourselves. So, we started by creating a few simple "test" paths and brainstorming ways to reconnect them.

You can do this too by starting with two paths—Path A and Path B. A might lead to C, and B might lead to D. If you want the paths to loop back, think about how C could connect to D, and how D could eventually bring you back to A (your starting point).

Start small and expand as you go, ensuring it all fits within the broader scope of your story. For us, the plot started to take shape naturally as we came up with fun ways for the character to meet their untimely demise! We eventually did add extra 'Story telling' frames to create the story without giving them actions. But this would be up to you..

Creating the Art.

The process of creating the art was both challenging and straightforward. From the start, we had a clear vision of what we wanted to create, and as the story unfolded, new ideas for artwork naturally emerged. However, we also took some shortcuts—reusing a lot of the same artwork for our death scenes, mostly out of laziness!

We decided to challenge ourselves by creating pixel art using Figma, which can be quite tough (for pixel art). If you’re a beginner, I’d recommend using Aseprite, but honestly, any tool will work.

We started with a 1000x1000px canvas and created a 10x10px rectangle, then simply duplicated it multiple times.

You can try this in Figma by selecting your rectangle, holding Shift+Option, and dragging the copy next to the original while keeping the keys pressed. Then, press Cmd+D, and like magic, new pixels will appear neatly next to each other! The start selecting them and give them a colour.

We removed some of the pixels to create a larger background, keeping the color palette minimal to simplify the process. Later on, we added a bit of extra flair by incorporating effects in Photoshop and layering in some text for a polished finish.

Eventually we created some Figma design components like the artwork itself, a frame border, some text components that were responsive and some backgrounds we could re-use.

Animating Starcaster

The animations were surprisingly simple. We imported our artwork into Adobe After Effects and experimented with a few video effects. For the text, we used an auto-typewriter script in After Effects, which handled most of the animation for us.

The tricky part is that we couldn't use video in our Frame. We solved this by exporting our video from After Effects, compressing it using a tool called Handbreak and uploading it to a website that converts .mp4 video files to animated .gif files. I used ezgif for this task.

Making it all come together

Bringing everything together turned out to be more challenging than I anticipated. We had 31 different screens that needed to be connected in a specific sequence. The real challenge was keeping track of what had already been added, which pathways were created, and which were still open.

To stay organized, I developed a simple system. Each type of frame received a ‘tag’: Story Frames, Option Frames, and Death Frames. This created a web of connections, allowing us to track what needed to link to what, and we assigned numbers to each. I also used colored labels to track progress—blue meant the frame was uploaded to Neynar Studio, and green meant it was both uploaded and connected (finished).

Using Neynar Frame Studio

Neynar Frame Studio (NFS for short) provided us with very basic tools, but they were just enough to make this project work. In the screenshot provided, you can see the structure we built. We added all the screens and ensured they were properly named (referencing the naming system I mentioned earlier).

From this point, it’s pretty straightforward. You know the name of each page, and you can easily add buttons to link them. The key is to ensure that each button directs to the correct frame.

As you can see, some of our buttons link to “Story 02,” “Story 03,” and so on. With a lot of scenes and frames, it can get confusing, which is why it's crucial to track your system carefully, as I mentioned earlier.

Epilogue

I've left out a few details to keep this story as straightforward as possible, but the core elements of how we created Starcaster are all here.

For us, Starcaster was a burst of inspiration, a test, and an experiment—much like the adventure within the story itself. We had to figure out a lot along the way, but unlike the characters, we didn’t die 😉. We did, however, have to restart and rethink our approach a few times. In the end, we managed to complete the story in about two weeks, with me balancing a newborn in one arm while drawing pixels in Figma with the other.

Thanks

Disky.eth

You can play Starcaster here or Join /Starcaster for questions.