Pull-cord login form

Pull the cord, the lamp turns on and the login card appears.

Get the code · $3React · Tailwind · TypeScript
Pull-Cord Login, preview

Use it in Next.js

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

export default function SignIn() {
  return <PullCordLogin 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 credentials, return a promise
defaultOn
start with the light on
onToggle
every pull
accent
bead and button colour

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.

Is it usable without pulling the cord?

Set defaultOn and the card is visible from the start.

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.