Interactive Haiku

Research

Poets.org was the client for this project, so I began with a thorough research phase into their mission and overall brand, as well as how they presented their poems. I also chose two haikus from their website ("The light of a candle" and "The old pond") to move forward with for my initial concept pitch. Most of my time during this phase was spent on ruminating about how interactivity would give these haikus an extra layer of engagement and enjoyment. Once I had a few ideas on how I would achieve this goal, I proceeded with my pitch.

Design Proposals

I pitched two concepts in each of the haikus. The first approach involved a bold and powerful appearance that treated the type as a visual spectacle by exaggerating its scale and presence within the frame. The second approach took a more simplified, reserved route that presented the type in a more traditional light, paying homage to the simplicity and delicacy of poetry.

My director chose the first approach and instructed me to move forward with just the candle haiku.

First Rive Pass

For my first pass, I immediately jumped into Rive and began setting up some interactions. I anticipated that this project would get very technical very quick, so I wanted to warm up with a simple Rive interaction as soon as possible.

This pass featured a rather basic drag-and-drop interaction in which each letter of "candle" from the first stanza needed to be transferred to each letter of "candle" in the second stanza. I completed this experience in a relatively short amount of time, and it gave me an idea of how far my current Rive skills might take me for future passes.

The feedback I received was that this experience should overall be far deeper and more intricate with each word, basically creating an entire scene-by-scene narrative. I was also told to focus on more intriguing compositions for my next pass, seeing as I had already tackled the technical aspect of Rive and would not need to worry about it for a while.

Second Design Pass

The following images were my second round of design proposals for more intriguing compositions and type treatment. The "Light" example with soft inner shadows received the most positive reaction, and it spawned a conversation about a whole "faux 3D" approach that would reveal and conceal the type in light and shadow throughout the piece. With these ideas as my inspiration, I moved forward with this approach into my second Rive pass.

Storyboard

Second Rive Pass

For this pass, I switched my experience to a longer scene-by-scene format, with pieces of each stanza appearing at different times, and with different interactions needed to progress through the haiku.

This scene-by-scene method proved to be a significant challenge for me in Rive. I had never worked with actual cinematic transitions within this software before, so trying to figure out how to execute this idea became a monumental task. The workflow I ended up using in Rive was an extremely inefficient one (the rather shoddy animation and design in this pass is enough to show that), and I just barely delivered this version with the feeling that there had to be a better way to do this...

Rive Component Practice

After my previous pass, I looked into a Rive feature know as Components (formerly Nested Artboards). These behave similarly to precomps in After Effects, or Components in Figma. I took a few hours to test out this feature in a separate file, using just simple greyscale "scenes."

The results from my experimentation were amazing. This was just the workflow I would need to properly redo my haiku experience without the jitteriness and awkwardness of the previous method I was using.

Final Rive Pass

With my newfound knowledge of Components, I once again redid the whole file from scratch. I was able to work on the file at a much faster pace with this new workflow. With the magic of Data Binding (which I already had some previous experience with), I could even playtest individual scenes within my whole sequence without having to play back through the entire file, which saved me a ton of time.

Below is a walkthrough video of my entire final file. I'm not sure if this is starting to get a bit unoptimized in terms of file size, but for now, I'm extremely proud of my organization and the ideas I had to finally execute my proper vision for this haiku project.

My Takeaway

Even with all its frustrations and limitations, Rive continues to be an insanely fun and versatile tool for me personally. This project allowed me to further develop my Rive skills, to the point where I now feel confident taking on much larger scopes for any kind of project that uses this software.

Normally, with how new I am to Rive, I tend to go off on tangents while working and end up experimenting with several different ideas that aren't really contributing to whatever I'm making at that moment. Now that I'm getting clearer and clearer visions of how to execute a specific idea, I anticipate that I'll soon start to get even faster at using Rive and not have to experiment and do a ton of guesswork just to arrive at a solution.