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

