Author: Gautier Jourdon Created: 2025-05-18
This component provides a playful, mischievous login form with a black and orange theme. It’s designed to surprise users by making the login button dodge and teasing them until they fill in their credentials. If they persist too much without entering any details, it triggers a dramatic “hacking” sequence.
- Dodging Login Button: The button moves around the viewport when the user tries to click it without filling the inputs.
- Taunting Messages: Each attempt displays a random teasing message on the button.
- Triggered Hacking Sequence: After more than 10 failed attempts, the screen glitches, goes full-screen, and shows a realistic terminal simulation with typing, command outputs, and a Matrix-style animation.
- Reset on Input: Filling both username and password restores the normal login form.
prank-hack-login/ ├── index.html # Main HTML file ├── css/ │ └── style.css # Styling rules ├── js/ │ └── script.js # Interactive behavior and hacking sequence └── img/ └── hacker-img.jpg # Subtle hooded hacker background
- Clone or download the repository.
- Open
index.htmlin your browser. - Try clicking the "Login" button without entering credentials to see the dodge effect.
- After 10 failed tries, watch the terminal takeover sequence.
- Fill in both fields to reset and allow a normal login.
- Change colors in
style.cssto match your preferred palette. - Modify the number of allowed attempts before triggering the hacking sequence in
script.js. - Swap out the hacker image in
img/for a different background.
License
© Gautier Jourdon, 2025. You are free to use, modify, and distribute this component without requiring attribution. However, no one may claim authorship or original creation of this project.
Feel free to adapt this component for fun login experiences or creative demos !