Background
Negative Thoughts is an interactive browser-based animation designed as a personal tool for reframing intrusive or spiraling thoughts. When users click on the illustrated character, she visually shifts through subtle stages of emotional change, and a stream of negative thoughts begins to animate and visibly soften. This acts as a quiet intervention: a visual and interactive prompt to pause, observe, and redirect.
Originally created as a way to check in with myself during moments of emotional overwhelm, the project welcomes anyone to reflect on their own internal loops, especially those thoughts that feel automatic, repetitive, or quietly harmful.
All character and thought illustrations were hand-drawn in Krita, then exported as transparent png frames. I coded the animation logic in JavaScript, designing each click to trigger a coordinated state change in the character alongside a looping animation of thought images. I also added subtle hover effects and scaling feedback using CSS for a more tactile experience.
This project helped me externalize something internal. The looping animations mirror the repetitive nature of negative thinking, while the simple act of clicking became a metaphor for how I can break those cycles: through distraction and a small shift in focus.
