proNew190 lines · framer-motion

Auth Sign In

Email, password, a real show/hide toggle, no network. A centred sign-in card with email and password fields, inline validation per field, a show/hide password toggle that's a real button (not a native control), a remember-me checkbox, and a styled success state on submit.

Use it for: The sign-in screen itself, or a sign-in section on a marketing page showing off what the real flow looks like, wired for a demo without a backend.
Themes: Light + dark
License: Commercial use

Live

Welcome back

Sign in to Loopkit

Use the email and password you signed up with.

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

export interface AuthSignInProps {
  eyebrow?: string;
  title?: string;
  subcopy?: string;
  buttonLabel?: string;
  successTitle?: string;
  successBody?: string;
  className?: string;
}

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Submitting validates both fields; an empty or malformed email and a password under 8 characters each surface their own inline error, and submission stops at the first failing field's message.
→The eye icon toggles the password field between masked and plain text without ever using the browser's own reveal control.
→A valid submission shows a brief 'signing in' state on the button, then cross-fades the form out for a success panel.
→No request is ever sent; the short delay before success exists purely to make the state change visible.

Accessibility

✓Both fields have real `<label>`s; errors use `aria-invalid` on the field and visible text right below it.
✓The show/hide button has `aria-pressed` and an `aria-label` that states the action, not just an eye icon.
✓The success panel has `role="status"` and `aria-live="polite"`.
✓Honours prefers-reduced-motion.