Component 044Forms

Lamp Login

Pull the cord of a cream mushroom lamp to bathe a dark room in warm light and reveal a frosted glass sign-in card with a gold button.

Pull or click the lamp cord (or focus it and press Enter) to switch on the light, then sign in with any username and password.

Pull the cord to switch on the light

Welcome

Loading preview…

Live interactive previewExplore the interaction, then make it yours.

Quick start

Save lamp-login.tsx in your components folder, then import it below. Requires React and Tailwind CSS.

TSXapp/page.tsx

import LampLogin from "@/components/ui/lamp-login";

export default function LoginPage() {
  return <LampLogin />;
}

Behind the interaction

Designed to explore, ready to adapt.

Dragging the cord stretches it and springs back; the shade glows, warm light floods the room, and the form springs into view.

Labelled fields, required validation, a signing-in state, error alerts, and a welcome view with sign-out are built in.

Typed onSubmit and onToggle callbacks, a defaultOn option, keyboard-operable cord, inert hidden form, and reduced-motion support.

Keep exploring