PainPortal

A login where every design decision is wrong- and on purpose

Comment

PainPortal

Inspiration

PainPortal came from one idea: push user patience to its breaking point. We combined our ideas to build an experience that feels like cognitive overload. We wanted to see how far a user would go before finally logging in. That goal shaped everything — motion, randomness, and intentional frustration.

What it does

The project has three stages:

1. Chaotic Login Page

  • Username and password boxes fly around
  • The submit button teleports
  • Images flash at random
  • The password rules shift
  • Nothing sits still

2. Human Verification Through Shadow Boxing

After the login attempt, the user is told to perform a shadow-boxing test.

  • They must fight a cat
  • Winning moves them forward
  • Losing sends them back to the start

3. "Successful" Login Page

Passing the test redirects the user to a page that loads in 266 years with a horizontal digital-style countdown.

How we built it

We used:

  • Vanilla JavaScript for movement logic and interaction
  • HTML/CSS for layout and visuals
  • VS Code as our main editor
  • AI tools for fast iteration and debugging

We planned the flow first, split tasks, and built each chaotic element piece by piece.

Challenges we ran into

Key issues:

  • Logic errors in the shadow-boxing game
  • Movement bugs in the flying inputs
  • Timing problems when switching between pages

Most problems came from small mistakes in positioning or state resets.

Accomplishments that we're proud of

  • Creating a login process that people immediately reacted to
  • Building a working mini-game inside the login pipeline
  • Mixing humor and frustration in a way that still functions as a "site"
  • Finishing a complete idea in a short time window

What we learned

We learned:

  • How to structure front-end projects from the ground up
  • How to work as a team under a time limit
  • How to divide responsibilities without causing overlap
  • How debugging small issues can take longer than the big ones

This project showed us how real development feels and how teammates support each other.

What's next for PainPortal

Future plans include making the experience worse for users:

  • Replacing the cat fight with a match against a chess bot that plays at $ELO > 3000$
  • More verification layers
  • More unpredictable interactions

Built With

Share this project:

Updates