Login form with a shy mascot

He watches you type the email and covers his eyes for the password.

Get the code · $3React · Tailwind · TypeScript
Shy Eyes Login, preview

Use it in Next.js

"use client";
import { ShyEyesLogin } from "@/components/ShyEyesLogin";

export default function SignIn() {
  return <ShyEyesLogin onSubmit={(email, password) => signIn(email, password)} />;
}

Install

  1. Copy from the zipPut react/src/components into src/, then npm i framer-motion.
  2. Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

onSubmit
valid email + password, return a promise
accent
button colour
bodyColors
mascot gradient
title / submitLabel
every label is a prop

Questions

Does the form work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Does it validate input?

Yes. It checks the email format and an empty password before calling onSubmit.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.