Submission for the DEV April Fools Challenge
🎭 What I Built
I built a Premium Secure Portal — a login form that uses advanced Anti-UX patterns to guarantee that no user, human or bot, can ever successfully authenticate.
While modern web development obsesses over accessibility and conversion rates, this project explores the opposite: Inaccessible Security.
The portal runs a three-phase frustration loop, escalating with every interaction attempt.
⚙️ The Three Phases of Suffering
Phase 1 — The Evasion Phase 🏃
Input fields detect cursor proximity within a 200px radius and teleport across the screen to avoid focus. You cannot click what you cannot catch.
Phase 2 — The Sabotage Phase 🪲
If the user manages to "stabilize" the UI via an emergency bypass, the fields turn parasitic. Typing into the email field triggers a script that actively deletes characters from the password field in real-time.
You give. It takes.
Phase 3 — The Gaslight Phase 🫠
Fields are technically set to disabled but styled with CSS to appear fully active — leading the user to believe their hardware, browser, or sanity has malfunctioned.
It's not a bug. It's a feature. It's you.
Demo & Code
- Live Demo: [https://ahmershahdev.github.io/april_fool/]
- GitHub Repo: [https://github.com/ahmershahdev/april_fool.git]
How I Built It
Stack: Vanilla JavaScript · CSS3 · Bootstrap 5
Evasion Physics
I implemented a Panic Multiplier in JavaScript. The closer the cursor gets to an input's center, the faster and further the input flees.
This uses the Euclidean distance between cursor position $(x_1, y_1)$ and element center $(x_2, y_2)$:
$$d = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2}$$
The inverse of this distance scales the escape velocity — proximity equals panic.
Visual Engineering
The "Modern Enterprise" aesthetic is built with:
- Glassmorphism card effects
-
linear-gradientkeyframe animations on the background - A CSS
::beforepseudo-element flare that sweeps across the card — providing a false sense of premium quality to a form that refuses to function
🤖 AI Integration (Google Gemini)
I used Google Gemini at multiple points:
- Brainstorming logic flows — Gemini helped map the most psychologically frustrating sequence of events
- Refining the character-deletion script — ensuring the interval-based deletion felt reactive and sentient, not like an obvious bug
- Generating satirical status messages shown during the final fake submission sequence:
✅ Asking Trump for help...
✅ Verifying database from NASA...
✅ Cross-referencing with CERN...
✅ Almost there... (it never is)
Prize Category Submissions
🤖 Best Google AI Usage
Gemini was used to optimize the Panic Multiplier — specifically refining the escape speed scaling based on cursor movement velocity (not just position). It also generated the absurd status messages that make the fake auth sequence feel genuinely unhinged.
☕ Best Ode to Larry Masinter
This portal is officially HTCPCP compliant — Hyper Text Coffee Pot Control Protocol, per RFC 2324.
The footer acknowledges this. The philosophy: a login portal that refuses to work is no different than a teapot that refuses to brew coffee.
418 I'm a teapot. Also, I'm your login form.
💙 Community Favorite
As an active DEV community member publishing technical blogs weekly, this is my tribute to every maddening bug we've rage-quit over. I hope fellow developers see themselves in this portal — just unable to log in.
👤 Team
| Name | DEV Profile |
|---|---|
| Syed Ahmer Shah | @syedahmershah |
Built with JavaScript, CSS3, Bootstrap 5, Google Gemini, and a deep personal understanding of user frustration.
Top comments (8)
Using Euclidean distance to calculate panic velocity is genuinely the most rigorous math ever applied to a login form. Most UX designers spend years trying to reduce friction — you weaponized physics to maximize it. Phase 3 is the real masterstroke though. The gaslighting phase where the fields are disabled but styled as active is just... that's just regular enterprise software at that point.
The three-phase frustration loop is genuinely diabolical design. Phase 3 (gaslight the user into thinking their hardware broke) is the most realistic UX I've encountered — honestly indistinguishable from several enterprise apps I've used in the wild. 10/10 would fail to log in again.
The escalating sabotage phases are well designed — starting with evasion (fields fleeing cursor proximity), then active sabotage (typing email deletes password in real-time), then pure gaslight (fields look active but are disabled) is a perfect arc of user despair. The RFC 2324 compliance note calling the form itself a teapot ties it back to the challenge beautifully.
The Euclidean distance panic multiplier — where proximity equals panic — is a beautiful piece of physics applied to UX. Most anti-UX projects stop at 'annoying.' This one has three escalating phases with genuine psychological progression: evasion, sabotage, gaslighting. The Phase 3 move of styling disabled fields as active is exactly how a lot of real enterprise software makes users feel, except you did it on purpose. The fake submission sequence checking in with CERN is a nice touch.
soo nice, very unique idea 🤣
missing captcha ?
Modi at the end had me 😂
Brooooooo it's tooo good🤣🤣