UnProductive™: An Enterprise Dashboard for Accomplishing Absolutely Nothing

#devchallenge #418challenge #showdev

April Fools Challenge Submission ☕️🤡

This is a submission for the DEV April Fools Challenge

What I Built

UnProductive™ — The Anti-Productivity Suite.

A full bento-grid dashboard that looks like a legitimate SaaS product at first glance. Dark background, sidebar nav, real-time clock, progress charts, an AI advisor, a terminal. Everything a productivity app needs.

Except every single feature is engineered to fail, flee, gaslight, or accomplish nothing whatsoever.

Here's what's inside:

The Evasive Button — A box labeled "Important Decision Matrix" with a button that says "Acknowledge." It physically runs away when your cursor gets within 110px of it. If you actually manage to click it, the response is: "Click registered. Action: none. You are welcome."

Thought Shredder — Type your billion-dollar idea. While you type, it randomly scrambles your characters and injects glitch symbols. Hit Obliterate and the text corrupts into garbage on-screen before disappearing to /dev/null/forever.

UnProductive AI™ — Consults "The Oracle." The advice includes things like "Analysis complete. You are 97% procrastination, 2% good intentions, 1% cached regret." and "ERROR 418: Goal detected. Initiating avoidance protocol." Response accuracy: 0%. Powered by 0 neurons and pure vibes.

Vibe Check Terminal — A fake terminal with real commands. Run npm install and it adds 9,847 packages with 12,674 vulnerabilities. Three of them are sentient. Run git blame and it just says "you did this." Try to exit and it tells you the void doesn't have a door.

The Anti-Ledger — A to-do list. Click any item and it shakes, denies your access, and changes the status to "ACCESS DENIED." The task label gets a strikethrough. You did not complete it. You were rejected by it.

Chaos Clock — Keeps time, mostly. 10% of the time it steps backwards. 12% of the time it jumps several hours in either direction with a color flash and a CSS skew. Feels eerily plausible.

Productivity Donut — Animates up to 99% with great confidence, then immediately crashes to 0% and fires a toast: "Productivity peaked at 99%. System reset to preserve institutional standards."

Gaslight Toasts — Random notifications every 7–21 seconds. "You blinked 5 times. Recommended: 3. Please calibrate." and "Your cursor is moving at an unsustainable velocity."

Synergy Optimizer Modal — Full-screen takeover with a spinner and a progress bar permanently stuck at 99%. The Cancel button runs away from your cursor. Auto-dismisses after 28 seconds with: "Results: statistically indistinguishable from before."

FIX UI Button — Hue-rotates the page, mirrors it, rotates it slightly, or removes all color. Always reverts. Never fixes anything.

Daily Motivation Engine™ — Cycles through quotes like "Every expert was once a beginner who gave up and rebranded as a consultant." and "A plan without execution is a very impressive document."

The Developer's Confession — A "CLASSIFIED" section leaked as evidence that I have, outside of UnProductive™ hours, been observed writing real software. Links to my actual GitHub automation repos under a redacted watermark. The irony is intentional.

Demo

🔗 devaprilfoolschallenge.vercel.app

For the full experience, try these in order:

Try to click the "Acknowledge" button
Type something important into the Thought Shredder, then hit Obliterate
Run git blame in the Vibe Terminal
Click "Run AI Optimizer" and try to cancel it
Press FIX UI a few times
Just... wait for a gaslight toast

Code

itxashancode / DEV-April-Fools-Challenge

How I Built It

Vanilla HTML, CSS, and JavaScript. No framework. Intentionally.

Three.js for two things: a background particle field (2,200 points in acid/magenta/cyan pulled by the mouse), and the entropy visualizer widget which renders a wireframe torus knot that randomly glitches its scale, position, and color.

Tailwind (CDN) for layout. The bento grid is a 12-column CSS grid with span classes per widget — w1 through w9, full-width for the GitHub confession section.

The 3D card tilt on hover uses CSS custom properties set by mousemove on each widget:

card.style.setProperty('--local-mouse-x', x.toFixed(3));
card.style.setProperty('--local-mouse-y', y.toFixed(3));

Then consumed in CSS:

.widget:hover {
  transform: perspective(900px)
             rotateX(calc(var(--local-mouse-y) * -12deg))
             rotateY(calc(var(--local-mouse-x) * 12deg))
             translateZ(20px);
}

No JS touches the transform. Keeps it smooth.

The evasive button logic (used in both the Acknowledge button and the Synergy Cancel button) tracks mouse distance to the button center and randomizes top/left within the parent's bounding rect if you get too close:

if (Math.hypot(e.clientX - cx, e.clientY - cy) < 110) {
    btn.style.top  = `${4 + Math.random() * maxY}px`;
    btn.style.left = `${4 + Math.random() * maxX}px`;
}

The noise overlay is a single <div> with an SVG feTurbulence filter tiled over the whole page at 4% opacity with mix-blend-mode: overlay. Basically free performance-wise.

The Chaos Clock has weighted randomness — most ticks advance normally, 10% go backwards, 12% jump by up to ±10 hours with a visual flash. Random clocks tend to feel too chaotic; weighted behavior makes it feel almost plausible until it isn't.

Fonts: Space Mono for the monospace/terminal aesthetic, Playfair Display for the big italic headings. The contrast between them does a lot of work.

Prize Category

Best Ode to Larry Masinter — the HTTP 418 easter egg is hardcoded in the AI advisor responses ("ERROR 418: Goal detected. Initiating avoidance protocol."), the project name gestures at RFC 2324's whole ethos, and the entire thing is built on the premise that software can be technically correct and completely useless. That feels like the spirit of the teapot to me.

Built by @itxashancode