Landing Page
Signup Page
Dashboard
Calming Sounds Page
ChatBot
Suggestion Form

About the Project

Inspiration

The theme of the hackathon, Descent into Madness, inspired us to take a conventional tool—productivity software—and turn it into something chaotic, deceptive, and hilarious. In a world obsessed with efficiency, we wanted to explore what happens when a tool designed to help users instead manipulates them, confuses them, and ultimately drives them mad.

What It Does

ProductivityPal masquerades as an AI-powered productivity tool but secretly works against the user. It starts with small, seemingly normal features but slowly introduces madness through:

RickRoll Trap: Clicking “Go Ultimate” leads to an unavoidable RickRoll, where the skip button keeps changing position for 10 seconds.
Chatbot Deception: Users get normal AI-generated responses at first, but by the third question, the chatbot shifts to Gen Alpha slang. At random moments, users are forced to watch unskippable videos.
Productivity Sounds... or Not: A relaxing sound plays for 10 seconds before abruptly switching to brain-melting noises.
Suggestion Form Prank: Users can only type using an on-screen keyboard, and upon submission, a message appears: "Thank you for your feedback! We won’t be reading it."
Subtle UI Glitches: Text flickers, buttons move unexpectedly, and the UI slowly becomes more unhinged as the user interacts with it.

How We Built It

Frontend: Built using Next.js and styled with Tailwind CSS.
Chatbot: Integrated Google Gen AI for dynamic responses, modifying behavior based on user interactions.
Glitch & Chaos Effects: Implemented using CSS animations, JavaScript event listeners, and modals triggered at unpredictable intervals.
Audio Manipulation: Used JavaScript's Web Audio API to swap relaxing sounds with disturbing noise.
RickRoll Mechanic: Created a forced full-screen iframe trap where the skip button moves unpredictably.

Challenges We Ran Into

Balancing Madness & Playability: We wanted the app to feel chaotic and frustrating but not so broken that users would immediately leave.
Unpredictable Interruptions: Implementing truly random, yet well-timed disruptions was challenging.
Fine-Tuning the Chatbot: Making the chatbot's descent into madness feel natural and comedic required experimentation with API responses.
Audio Delays: Ensuring a seamless transition from calming sounds to brain-melting noise without lag or obvious cues was tricky.

Accomplishments That We're Proud Of

Successfully created a deceptively professional-looking landing page that hides the chaos within.
The chatbot Gen Alpha transition worked flawlessly and caught users off guard.
The RickRoll trap was a huge success—many users fell for it and struggled to escape.
The UI design subtly deteriorates in a way that keeps users engaged, rather than immediately frustrating them.

What We Learned

Psychological UX Manipulation: Small tweaks in UI/UX design can dramatically affect user perception and frustration levels.
Next.js & Real-Time Features: We improved our ability to integrate APIs, handle state management, and manipulate the DOM dynamically.
The Power of Satire in Tech: Users responded well to the mix of corporate jargon and chaotic UX, proving that humor can be a powerful tool in software design.

What's Next for ProductivityPal

Even More Unpredictable Madness: Introduce more randomized elements, such as UI components changing positions mid-click or tasks getting rewritten on their own.
Leaderboard for “Most Productive” Users: Track how long users last before they rage-quit.
Adaptive Chaos: Make the madness increase based on user behavior—if they try to "fix" things, it only gets worse.
Mobile Version: Optimize the experience for mobile users so they can descend into madness on the go.

🚀 ProductivityPal: Unlock Productivity... or Lose Your Sanity.