supreme-barnacle

Inspiration

The inspiration behind this project was to create a password reset system that humorously highlights the chaos and frustration users often experience with poorly designed security flows. By intentionally introducing random errors and unpredictable behaviors, the system demonstrates how user experience can deteriorate when stability and clarity are lacking.

What it does

This app implements a multi-step password reset process with intentional instability and chaos. Users enter their email to request a reset code, then verify the code and set a new password according to complex, changing rules. The system simulates errors, delays, visual glitches, and unpredictable success outcomes to showcase the struggles users face during password recovery.

Try it out here.

How we built it

We built this project using HTML, CSS, and vanilla JavaScript. CSS animations are used to create glitch and shake effects that reflect system instability. JavaScript manages the multi-step flow, randomly generates reset codes, introduces error conditions based on a rising “chaos level,” and handles UI updates like loading spinners and messaging. The app is fully client-side and simulates network behavior with randomized delays.

Challenges we ran into

The main challenge was designing an intentionally frustrating user flow that still feels engaging rather than outright broken. Balancing randomness and chaos with some elements of success helped make the experience somewhat believable. Managing state transitions and visual feedback during overlapping asynchronous operations also required careful handling.

Accomplishments that we're proud of

We’re proud of the sophisticated state management that controls the chaotic behavior progressively, including the dynamic password rules and the system stability indicator. The glitch and animation effects effectively communicate the app’s “from hell” theme. Also, the fully responsive design ensures the experience works smoothly across devices.

What we learned

We learned how subtle UI animations and randomization can drastically impact user perception of system reliability. It reinforced the importance of clear feedback and consistent rules in security workflows. The project also provided valuable practice managing complex state and asynchronous behavior in frontend JavaScript.

What's next for supreme-barnacle

Future improvements will include adding more realistic backend integration, expanding error scenarios for security awareness, and developing accessibility features to accommodate all users. Additionally, enhancing the help system with interactive troubleshooting and incorporating user analytics to track common frustration points are planned.

Built With

• html