Animated login page for React

A desk lamp finds each field in the dark and floods the screen when you sign in.

Get the code · $3React · Tailwind · TypeScript
Spotlight Lamp Login, preview

Use it in Next.js

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

export default function SignIn() {
  return (
    <SpotlightLampLogin
      onSignIn={async (email, password) => {
        const res = await fetch("/api/login", { method: "POST", body: JSON.stringify({ email, password }) });
        return { ok: res.ok };
      }}
    />
  );
}

Install

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

Props

onSignIn
your auth call, resolve { ok: true }
onSuccess
runs after the flood
data
user and company shown after sign-in

Questions

Does the login page 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 handle authentication?

It's the interface. Your onSignIn talks to Supabase, Clerk, NextAuth or your own API.

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.