It is an authentication interface designed to be technically functional but practically impossible to use. Instead of typing a password, the user must sustain a specific volume level (screaming) into their microphone to generate characters.
I build this for BROKEN UI JAM
Creating “bad” UI actually taught us a lot about good engineering:
Browser Permissions: We learned how to handle navigator.mediaDevices.getUserMedia and manage microphone permissions gracefully (or ungracefully, in this case).
Real-Time Data: We learned how to visualize audio data (the volume meter) by mapping frequency arrays to CSS styles in a requestAnimationFrame loop.
User Psychology: We discovered that “Good UX” is about reducing friction. By intentionally adding friction (physical exertion + precise timing), we realized just how many invisible helpers (like autofocus and auto-save) exist in modern forms to help users succeed.
Limits of the Web: We explored how browsers handle background tab throttling—meaning this app forces the user to keep the window open and active to suffer the full experience.
It is an authentication interface designed to be technically functional but practically impossible to use. Instead of typing a password, the user must sustain a specific volume level (screaming) into their microphone to generate characters.
The Challenge: If the user stops screaming, the characters delete themselves.
The Trap: If the user screams too loud, the system resets.
The Twist: The system actively fights the user by blurring the screen and changing the password right before completion.
2. What We Made (Technical Implementation)
We built a standalone web application using Vanilla JavaScript (no frameworks) to keep the project lightweight and raw.
Audio Processing: We utilized the Web Audio API (AudioContext and AnalyserNode) to capture real-time microphone data
Signal Analysis: We wrote a loop that calculates the average frequency volume every few milliseconds to determine if the user is “screaming” (inputting) or “breathing” (deleting).
State Management: We created a hostile game loop that tracks “Scream Charge” vs. “Decay Charge” to manipulate the DOM elements dynamically.
Log in to leave a comment
I’m working on my first project! This is so exciting. I can’t wait to share more updates as I build.
Log in to leave a comment