Burn Book

Click to Open...
Fetch Journal Option
Angry Journal Option
Up in Flames

Inspiration

We were heavily inspired by the movie Mean Girls and books like "Burn After Writing" written by Sharon Jones that promoted self-reflection through journaling. There is a sense of immediate satisfaction through burning and releasing all your worrisome thoughts, leaving them behind in the past. We believe this interactive temporary diary could benefit people and bring comfort during emotional situations.

What it does

When the user opens the diary, they're greeted by six emotions to choose from. Each emotion leads to a unique Mean Girls character cut out (inspired by early 2000s aesthetics) and a prompt asking the user to reflect on how they feel. When they're ready to let go, they can press the "Burn" button and watch the page be engulfed in flames. None of the written words are ever saved, so the diary becomes a completely clean slate.

How we built it

We made divs that would be turned on and off using the display: block and display: none functions. Every div served as a scene in the page, and the buttons and textboxes were added on top.

Challenges we ran into

We struggled with getting the fire animation to work (described below).

Accomplishments that we're proud of

We're proud of the fire sprite moving up to cover the page. We tried several different ways of animating in HTML and JS and the fire refused to cooperate. In the end, we ended up using requestAnimationFrame() to smoothly transition the fire sprite from the bottom of the screen to the top. Overall, we're proud of ourselves for recreating the early 2000s website aesthetic with the music, sound effects, custom cursor, and graphics.