The latest articles on DEV Community by NEERAJ (@ydv129). https://dev.to/ydv129 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3873337%2F505df6e5-a8bf-458a-971b-580483d808f8.png https://dev.to/ydv129 en NEERAJ Sat, 11 Apr 2026 15:53:52 +0000 https://dev.to/ydv129/quantum-compliance-console-4k1f https://dev.to/ydv129/quantum-compliance-console-4k1f <p><em>This is a submission for the <a href="https://dev.to/challenges/aprilfools-2026">DEV April Fools Challenge</a></em></p> <h1> Quantum Compliance Console </h1> <h2> What I Built </h2> <p>Quantum Compliance Console is a browser-only “control panel” that behaves like an overconfident enterprise dashboard while actively fighting your attention.</p> <p>It features:</p> <ul> <li>A roaming on-page cursor (the real cursor is hidden) so your eyes constantly lose the target.</li> <li>Buttons that jitter, delay, and occasionally route your click somewhere else “for validation”.</li> <li>Labels that randomly scramble, swap, or rename themselves mid-use.</li> <li>Focus that gets stolen at inconvenient times.</li> <li>Panels that drift and periodically reshuffle positions.</li> <li>A “Motion Gain” dial that refuses direct input and only reacts to motion.</li> <li>Beeps that appear at the worst possible moments (after the first interaction).</li> </ul> <h2> Demo </h2> <p>Netlify: <a href="https://fool2026.netlify.app" rel="noopener noreferrer">https://fool2026.netlify.app</a></p> <p>Run it locally:</p> <ul> <li>Open <code>index.html</code> in a browser, or serve the folder with any static server.</li> </ul> <p>Suggested torture test:</p> <ul> <li>Toggle “Ultra optimization”.</li> <li>Click around and try to keep a single panel in one place.</li> <li>Arm the Keyboard Policy, then press Enter/Escape and see what it decides you meant.</li> <li>On mobile: enable motion, then shake the device.</li> </ul> <h2> Code </h2> <p>GitHub repo: <a href="https://github.com/ydv129/fool2026" rel="noopener noreferrer">https://github.com/ydv129/fool2026</a></p> <p>Key files:</p> <ul> <li><code>index.html</code></li> <li><code>styles.css</code></li> <li><code>script.js</code></li> </ul> <h2> How I Built It </h2> <ul> <li>Vanilla HTML/CSS/JavaScript (no frameworks)</li> <li>CSS variables + transforms for constant micro-movement</li> <li> <code>requestAnimationFrame</code> for the fake cursor and loader behavior</li> <li>Timers to reshuffle cards, scramble labels, and “re-index” the layout</li> <li>DeviceMotion API (when available) for motion-driven gain</li> <li>Web Audio API (<code>AudioContext</code>) to generate tiny, annoying beeps after user interaction</li> </ul> <p>Author: Neeraj Yadav</p> devchallenge 418challenge showdev