Tulipomania

Inspiration

I have been fascinated by the story of the Tulip craze that took place in the 1600s in Holland since my first exposure to this historical event via Michael Pollan's 2001 book 'The Botany of Desire'. Years ago in art school my thesis project was to create a graphic novel without using any words that depicted a story set in Holland during this period of time. When I discovered Bolt.new was hosting a hackathon I thought it would be a great opportunity and motivation to 'upgrade' my old graphic novel project using modern tools. I wanted it to be a little more interactive so I decided on the choose-your-own-adventure format, which was a childhood favorite of mine.

What it does

It's a choose-your-own-adventure story with branching logic. The storyline is different depending on the choices made at each stage.

How I built it

I first used ChatGPT and Claude to develop a storyline and then the branching logic. I used a naming convention to identify the story 'nodes' to keep things more organized. (A1b2, A1a2 etc). once I had the logic laid out and was fairly happy with the storyline texts I asked Bolt.new to create a choose your own adventure template using the logic/story data. The first iteration was very good, nearly perfect. Bolt used React for the user interface. Vite is used for builds. Tailwind CSS (along with PostCSS and Autoprefixer) is used for styling. This all gave me a very solid framework that just needed visual content. To store the video content I am using Supabase. To create the video content I first worked with ChatGPT to create several images in the style that I wanted to use. Then I used those images to create a style template in OpenArt.ai. I choose OpenArt mainly due to the ease of use of the interface and the model choices available. Once I had a style template I would use the story node text to craft the image prompt. Sometimes I used Claude to assist in the first prompt iteration. Once I had an image I liked I would use it to create the video clip for that node. This was the most time consuming part, getting the videos right. The primary video models I used were Kling 2.1 and Pixverse 4.0 Once I had all the videos I liked I just connected Supabase to Bolt and asked bolt to associate each video with the proper node and thats it.

Challenges we ran into

It was hard to understand the token usage in Bolt at the beginning. I quickly leaned to use chat mode for best results. The biggest challenge was video generation. It was a steep learning curve to understand how to effectively prompt the different models for desired results. Bolt had a couple quirks here and there but for this project it really performed well.

Accomplishments that I'm proud of

Im happy to have the project in the stage it is now. The videos are acceptable and the logic is tight.

What I learned

SO MUCH. A ton about how to talk to Bolt effectively and get info from it. I learned how branching logic works and how the story data can be stored in a single file for easy editing. I learned about optimizing file size and server efficiency.

What's next for Tulipomania

I'll probably fine tune the storylines and add to them. Some of the animations can be improved. I'll add sound and possibly a voiceover for the text. The next stage will be to attempt to gamify the whole thing. Adding mini games to each story node that the user plays before giving them the choices. I think it could be an interesting game where you earn tulips in the mini games and can sell them or breed them or whatever and depending on what you are holding (tulip bulbs or money) when the crash unexpectedly happens you may win or lose.

Built With

• css
• javascript
• react
• supabase
• tailwind
• typescript
• vite