NEW
A sign-in page in the dark: a desk lamp finds each field and floods the screen when you sign in.
Animated login forms
Sign-in screens people remember: a mascot that hides his eyes, a lamp you switch on, a code gate that unlocks the page.
NEW
Arcs spin around six chunky cells, merge into one check, and the blurred dashboard behind them unlocks.
Pull the cord, the lamp turns on, the login form appears.
A login mascot that watches you type and covers his eyes for the password.
Each login here is a working form, not a mockup. It has the email and password fields, focus and error states, a show-password toggle where it makes sense and a success state, so you can wire it to your own auth (Supabase, Clerk, NextAuth, Firebase) by passing one submit handler.
You get the React version (TypeScript, Tailwind CSS, Framer Motion) and a plain HTML file with the CSS and JavaScript inside, for any stack. PROMPT.md lets Claude Code, Cursor or v0 fit it into your app.
Want all of them? The Shelf has every component in the catalogue for $29, once.
Questions
- Does the login form handle real authentication?
- It handles the interface and hands you the email and password on submit. You connect it to the auth you already use, and the docs in the download show how to wire it to Supabase.
- Can I use it in Next.js?
- Yes. The React version is a client component that drops into the Next.js App Router or Pages Router.
- Is it accessible?
- Fields have labels, errors are announced to screen readers, and the motion calms down when the visitor has Reduce Motion turned on.