top of page

Poppers!
 

Poppers is a playful, interactive task visualization tool designed with the philosophy that productivity should feel light, not burdensome. Inspired by the idea of floating deadlines, each task is represented as a colorful balloon gently drifting toward its due date — and when you're done? Pop it for some confetti joy! 

The core ideology behind Poppers is to reduce the anxiety that often comes with traditional task managers. Rather than seeing a long, static list of to-dos, this dashboard gives users a visual, intuitive understanding of time, encouraging them to complete tasks without stress.

The UI is built to be cheerful and engaging. Every element is handcrafted — from the Procreate-drawn sky and balloon illustrations to the logo. The design relies on gentle gradients, soft hover effects, and subtle animations like balloon inflation and bobbing, creating a calming and whimsical user experience.

The sky area represents a 7-day timeline, where each vertical strip indicates how far away a task’s due date is. Tasks drift horizontally in real-time, and overdue ones turn red and dock at the far right. Tooltips on hover reveal metadata like creation and due dates. A custom cursor effect adds to the tactile feel.

The "Add Task" panel is anchored at the bottom, mimicking the launchpad for new balloons. Once completed, tasks get moved to a beautifully styled table, keeping a complete history with timestamps.

Building Poppers taught me a blend of technical and design skills:

  • DOM manipulation and timed animations using JavaScript.

  • How to create custom cursors and tooltips dynamically.

  • Handling real-time data mapping (task due dates → screen position).

  • Organizing HTML/CSS/JS into a clean, modular system.

  • Using Git & GitHub for project management, SSH key setup, and versioning.

  • Creating assets in Procreate and integrating them into a responsive frontend.

But more than that, I learned how a simple concept — visualizing time — could become something joyful and emotionally resonant with the right mix of design and logic.

Check out the project at: https://github.com/swara-kadam/poppers

bottom of page