Login form · character animation · no libraries
He reads your email.
Never your password.
Meet Rex, the ZainSpire runner, now on guard duty. His eyes follow the exact letter you are typing in the email field. Move to the password and he covers his eyes. Press show and he peeks through his fingers. A mistyped email makes him frown before you even press the button.
How the eyes find the letter
Measured, not guessed
The script measures the text before the caret with a canvas using the same font as the input, so Rex looks at the exact letter you are on. Arrow keys, clicks and long emails that scroll inside the field all work.
How he moves
Springs and states
Every pose is a state: idle, reading, covering, peeking, worried, happy. Switching state only changes a class, and CSS transitions with a springy curve do the motion, so it stays smooth even on slow phones.
Use it on your site
Your form, your backend
Download the code and point the form at your own login. Nothing in the demo is sent anywhere. Labels, focus rings and the live message are there for screen readers and keyboard users.