Design Challenge
I brought a Haiku to life through interactive experience while only animating the letterforms and the words. The goal of this animation is to enhance and expand the expressiveness of the original Haiku, helping the audience to understand poem better.
Executed in: Rive, Figma
Research
Poets.org is produced by the Academy of American Poets, a nonprofit charitable organization. The site was launched in 1996, becoming the first online resource for poems, poets’ biographies, essays about poetry, and materials for K–12 teachers.
Haiku originated in Japan in the 17th century as a short form of poetry, typically consisting of three lines with a 5-7-5 syllable structure. Its main features are brevity, seasonal references (kigo), and a focus on capturing fleeting moments of nature, emotions, or daily life with clarity and depth.
Concepts
I had two direction at first.
01: Focus on the size variation to create dimension and the vastness of space.
02: Emphasize the naturalness of Haiku by using hand-written text and texture.
Selected Haiku
Japanese Haiku III
by Lewis Grandison Alexander
by Lewis Grandison Alexander
I ride down the stream
Between the Earth and the Sun
On the moons’s shadow.
Refined Concept
This direction aim to communicate the relationship between planets, helping the audience to create a sense of dimension.
Composition Exploration
After several passes of exploration, the feeling of the space is best communicated by using vibrant color on the dark background.
The out of focus objects and basic shapes communicate the relationship in the space, helping the audience understand poem's world.
Technical Execution
Rive does not have much variety at creating different style of visual, however I want vibrant gradient in my design, so I incorporate Figma during the process. I used blend mode and layer blur to create the glowy look of the "SUN", and then bring it into Rive for animation.
Since Rive doesn't have actual 3D dimension, I faked the Z depth by animating blurriness and the scale of the text based on the principle of perspective.
Before each of the animation begins, the audience needs to trigger the next part by themselves. I worked in Rive to create the interactivity in this project.
In order to make the transition between each line work, I created multiple hit-boxes and listeners to trigger different animation.
