Gravity Login
Textboxes tilt and fall if you type too much.
Tags:logininputphysicsfrustrating
Tech:reactcss-transforms
Live Demo
⚠️ Warning: This is an intentionally terrible UI pattern. Do not use in production applications.
Gravity Login
Be careful, the letters are heavy!
Why This Control Is Terrible
Each character adds 'weight' to the textboxes. As the weight increases, the inputs tilt, making them harder to read. If the weight exceeds the maximum limit, the textbox will dramatically fall off the screen, clearing all content and forcing the user to start over. It turns a simple login form into a delicate balancing act.
UX Violations
- Violates user expectations and mental models
- Increases cognitive load and frustration
- May cause accessibility issues
- Breaks established design patterns
- Provides poor feedback and unclear states