This is a submission for the DEV April Fools Challenge

Quantum Compliance Console

What I Built

Quantum Compliance Console is a browser-only “control panel” that behaves like an overconfident enterprise dashboard while actively fighting your attention.

It features:

• A roaming on-page cursor (the real cursor is hidden) so your eyes constantly lose the target.
• Buttons that jitter, delay, and occasionally route your click somewhere else “for validation”.
• Labels that randomly scramble, swap, or rename themselves mid-use.
• Focus that gets stolen at inconvenient times.
• Panels that drift and periodically reshuffle positions.
• A “Motion Gain” dial that refuses direct input and only reacts to motion.
• Beeps that appear at the worst possible moments (after the first interaction).

Demo

Netlify: https://fool2026.netlify.app

Run it locally:

• Open index.html in a browser, or serve the folder with any static server.

Suggested torture test:

• Toggle “Ultra optimization”.
• Click around and try to keep a single panel in one place.
• Arm the Keyboard Policy, then press Enter/Escape and see what it decides you meant.
• On mobile: enable motion, then shake the device.

Code

GitHub repo: https://github.com/ydv129/fool2026

Key files:

• index.html
• styles.css
• script.js

How I Built It

• Vanilla HTML/CSS/JavaScript (no frameworks)
• CSS variables + transforms for constant micro-movement
• requestAnimationFrame for the fake cursor and loader behavior
• Timers to reshuffle cards, scramble labels, and “re-index” the layout
• DeviceMotion API (when available) for motion-driven gain
• Web Audio API (AudioContext) to generate tiny, annoying beeps after user interaction

Author: Neeraj Yadav