Free stuff 0113.10.2026
Form with eyes.
HTMLCSSJS[From an @levizdev reel] — [Built by Claude from one prompt]
A login form that follows your cursor, closes its eyes on the password and gets sad on a wrong one. Built by Claude from a single prompt.
01/ Prompt
Build a login form as a single HTML file (HTML, CSS, JS, no libraries). Character: above the form, a round “head” with two big cartoon eyes. Behaviour: the pupils smoothly follow the mouse cursor; while typing the email, the eyes look at the text and move along with the typing. States: while entering the password, eyelids close the eyes; when “show password” is pressed, one eye peeks; a wrong password (anything except demo123) shows sad eyebrows and a gentle shake of the form; the right password turns the eyes into smiles and the character cheers. Style: background #F4F1EA, text #111111, main accent cobalt #1F2BE0, second accent orange #FF5A1F, Unbounded for the heading and Manrope for text (Google Fonts), 28px corner radius, 4px black outline, flat design without shadows, smooth 200–300 ms animations.
02/ Ready code
forma.html1 file · 21 KB
On a phone, copy the prompt. Open the file on a computer.
03/ How to run
- 01Copy the prompt into Claude or ChatGPT to get your own version.
- 02Or download the ready file and open it in a browser — it just works.
- 03Swap the “Style” part for your brand: colours, fonts, radii.
Live demo — move your cursorOpen ↗
Demo password: demo123
Why it worked
Prompt formula.
01CharacterWho lives in the interface. Here: a head with two eyes above the form.
02BehaviourHow it reacts: the eyes follow the cursor and the typed text.
03StatesWhat changes on input, error and success: closed eyes, sadness, joy.
04StyleExact colours, fonts, radii and animation speed — otherwise you get the internet average.
Open for projects
Need a detail like this on your site?
The prompt is a good start. If it has to live inside a real site, connect to sign-up and be production-ready, I'll build it end-to-end.