React animated login pageAnimated Login Page Where the Password Cuts a Key
React animated login page: a React login page where each character of the password cuts a notch in a brass key, so a typo shows without revealing the password. Signing in slides the key into a lock that turns open or jams.
Features
- Every character typed cuts the next notch of the key, with a sliver of brass falling from the cut
- The same password always cuts the same key, and one wrong character changes every cut after it, so typos are visible while the password stays hidden
- The email goes on a paper tag tied to the key, and the password in ten slots, one under each notch it cuts
- One deep green world with brass as the only bright thing; a door runs down the page's right side; on sign-in the key slides into it and the brass lock turns and reads Open, or jams and backs out with an error
- A real form: labels, browser autofill and password managers, show and hide, an announced error and keyboard focus rings
- Takes an async onSubmit that resolves true or false; all motion is skipped for reduced motion
Best for: SaaS products and member areas that want a sign-in screen people remember, with a real email and password form underneath.
Installation
npm install motion lucide-react clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| engraving | string | - | A short word stamped into the key's bow. |
| title | string | - | The headline. |
| description | string | - | The line under the headline. |
| labels | object | - | Field labels, the email placeholder, the button in its two states, show and hide, and the lock's two readings. |
| error | string | - | The message when the password is wrong. |
| success | { title; description; action: { label; href } } | - | What the page says once the lock is open, and where its button leads. |
| forgot | { label: string; href: string } | - | The forgot-password link. |
| signup | { lead: string; label: string; href: string } | - | The link for people without an account. |
| hint | string | - | An optional line under the links. |
| onSubmit | (credentials) => Promise<boolean> | - | Checks the email and password: true turns the key, false jams it. |
| className | string | - | Classes on the page. |
FAQ
Is the Animated Login Page Where the Password Cuts a Key free to use?
Yes. Animated Login Page Where the Password Cuts a Key is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Animated Login Page Where the Password Cuts a Key work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Animated Login Page Where the Password Cuts a Key in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Animated Login Page Where the Password Cuts a Key need installed?
motion, lucide-react, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Animated Login Page Where the Password Cuts a Key accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.